Honkai: Star Rail Texting HTML/Code

<div class="grid-container"></div>
<div class="messenger">
  <div class="messagebody">
    <div class="header">
      <p class="contact">The Astral Express Family</p>
    </div>
    <div class="user-container">
      <div class="user-messages">
        <p>
          <span class="user-name">Saru</span><br />
          <span class="user-img"
            ><img
              src="https://static.wikia.nocookie.net/houkai-star-rail/images/b/bc/Message_Trailblazer_Relics.png" /></span
          ><br />
        </p>
      </div>
      <div class="user-icon">
        <p>
          <span class="icon">
            <img src="https://i.imgur.com/73pSK7H.png" />
          </span>
        </p>
      </div>
    </div>
    <div class="user-container">
      <div class="user-messages">
        <p>
          <span class="user-name">Saru</span><br />
          <span class="user-reply">Found some strange items...</span><br />
        </p>
      </div>
      <div class="user-icon">
        <p>
          <span class="icon">
            <img src="https://i.imgur.com/73pSK7H.png" />
          </span>
        </p>
      </div>
    </div>
    <div class="otheruser-container">
      <div class="otheruser-icon">
        <p>
          <span class="icon">
            <img
              src="https://static.wikia.nocookie.net/houkai-star-rail/images/1/1a/Character_Dan_Heng_Icon.png"
            />
          </span>
        </p>
      </div>
      <div class="otheruser-messages">
        <p>
          <span class="otheruser-name">Dan Heng</span><br />
          <span class="otheruser-text">Relics.</span>
        </p>
      </div>
    </div>
    <div class="otheruser-container">
      <div class="otheruser-icon">
        <p>
          <span class="icon">
            <img
              src="https://static.wikia.nocookie.net/houkai-star-rail/images/d/d3/Character_March_7th_Icon.png"
            />
          </span>
        </p>
      </div>
      <div class="otheruser-messages">
        <p>
          <span class="otheruser-name">March 7th</span><br />
          <span class="otheruser-text">Relics</span>
        </p>
      </div>
    </div>
    <div class="otheruser-container">
      <div class="otheruser-icon">
        <p>
          <span class="icon">
            <img
              src="https://static.wikia.nocookie.net/houkai-star-rail/images/0/00/Character_Himeko_Icon.png"
            />
          </span>
        </p>
      </div>
      <div class="otheruser-messages">
        <p>
          <span class="otheruser-name">Himeko</span><br />
          <span class="otheruser-text">Relics</span>
        </p>
      </div>
    </div>
    <div class="otheruser-container">
      <div class="otheruser-icon">
        <p>
          <span class="icon">
            <img
              src="https://static.wikia.nocookie.net/houkai-star-rail/images/1/11/Character_Welt_Icon.png"
            />
          </span>
        </p>
      </div>
      <div class="otheruser-messages">
        <p>
          <span class="otheruser-name">Welt</span><br />
          <span class="otheruser-text">Those are Relics.</span><br />
        </p>
      </div>
    </div>
    <div class="user-container">
      <div class="user-messages">
        <p>
          <span class="user-name">Saru</span><br />
          <span class="user-reply">Thanks.</span><br />
        </p>
      </div>
      <div class="user-icon">
        <p>
          <span class="icon">
            <img src="https://i.imgur.com/73pSK7H.png" />
          </span>
        </p>
      </div>
    </div>
    <div class="user-container">
      <div class="user-messages">
        <p>
          <span class="user-name">Saru</span><br />
          <span class="user-reply">So what's a relic?</span><br />
        </p>
      </div>
      <div class="user-icon">
        <p>
          <span class="icon">
            <img src="https://i.imgur.com/73pSK7H.png" />
          </span>
        </p>
      </div>
    </div>
    <div class="otheruser-container">
      <div class="otheruser-icon">
        <p>
          <span class="icon">
            <img
              src="https://static.wikia.nocookie.net/houkai-star-rail/images/1/11/Character_Welt_Icon.png"
            />
          </span>
        </p>
      </div>
      <div class="otheruser-messages">
        <p>
          <span class="otheruser-name">Welt</span><br />
          <span class="otheruser-text">
            A construct made from a data stream. Many believe they're linked to
            Stellarons and the Fragmentum phenomenon. </span
          ><br />
        </p>
      </div>
    </div>
    <div class="otheruser-container">
      <div class="otheruser-icon">
        <p>
          <span class="icon">
            <img
              src="https://static.wikia.nocookie.net/houkai-star-rail/images/1/11/Character_Welt_Icon.png"
            />
          </span>
        </p>
      </div>
      <div class="otheruser-messages">
        <p>
          <span class="otheruser-name">Welt</span><br />
          <span class="otheruser-text">
            What we refer to as relics are objects corroded by the Fragmentum
            whose data is saved and then reconstructed. </span
          ><br />
        </p>
      </div>
    </div>
    <div class="user-container">
      <div class="user-messages">
        <p>
          <span class="user-name">Saru</span><br />
          <span class="user-reply">Thanks.</span><br />
        </p>
      </div>
      <div class="user-icon">
        <p>
          <span class="icon">
            <img src="https://i.imgur.com/73pSK7H.png" />
          </span>
        </p>
      </div>
    </div>
    <div class="user-container">
      <div class="user-messages">
        <p>
          <span class="user-name">Saru</span><br />
          <span class="user-reply">So what's a relic?</span><br />
        </p>
      </div>
      <div class="user-icon">
        <p>
          <span class="icon">
            <img src="https://i.imgur.com/73pSK7H.png" />
          </span>
        </p>
      </div>
    </div>
    <div class="otheruser-container">
      <div class="otheruser-icon">
        <p>
          <span class="icon">
            <img
              src="https://static.wikia.nocookie.net/houkai-star-rail/images/1/11/Character_Welt_Icon.png"
            />
          </span>
        </p>
      </div>
      <div class="otheruser-messages">
        <p>
          <span class="otheruser-name">Welt</span><br />
          <span class="otheruser-text">
            ...You could consult Herta. She's an expert in relic research. </span
          ><br />
        </p>
      </div>
    </div>
  </div>
  <div class="grid-container"></div>
  <div class="messenger">
    <div class="messagebody">
      <div class="header">
        <p class="contact">March 7th</p>

        <p><span class="tagline">Today is also March 7th~</span><br /></p>
      </div>
      <div class="otheruser-container">
        <div class="otheruser-icon">
          <p>
            <span class="icon">
              <img
                src="https://static.wikia.nocookie.net/houkai-star-rail/images/d/d3/Character_March_7th_Icon.png"
              />
            </span>
          </p>
        </div>
        <div class="otheruser-messages">
          <p>
            <span class="otheruser-name">March 7th</span><br />
            <span class="otheruser-text">Trailblazer</span><br />
          </p>
        </div>
      </div>
      <div class="otheruser-container">
        <div class="otheruser-icon">
          <p>
            <span class="icon">
              <img
                src="https://static.wikia.nocookie.net/houkai-star-rail/images/d/d3/Character_March_7th_Icon.png"
              />
            </span>
          </p>
        </div>
        <div class="otheruser-messages">
          <p>
            <span class="otheruser-name">March 7th</span><br />
            <span class="otheruser-text">I got a new sticker pack</span><br />
          </p>
        </div>
      </div>
      <div class="otheruser-container">
        <div class="otheruser-icon">
          <p>
            <span class="icon">
              <img
                src="https://static.wikia.nocookie.net/houkai-star-rail/images/d/d3/Character_March_7th_Icon.png"
              />
            </span>
          </p>
        </div>
        <div class="otheruser-messages">
          <p>
            <span class="otheruser-name">March 7th</span><br />
            <span class="otheruser-img"
              ><img
                src="https://static.wikia.nocookie.net/houkai-star-rail/images/f/f1/Sticker_PPG_01_March_7th_14.png"
            /></span>
          </p>
        </div>
      </div>
      <div class="otheruser-container">
        <div class="otheruser-icon">
          <p>
            <span class="icon">
              <img
                src="https://static.wikia.nocookie.net/houkai-star-rail/images/d/d3/Character_March_7th_Icon.png"
              />
            </span>
          </p>
        </div>
        <div class="otheruser-messages">
          <p>
            <span class="otheruser-name">March 7th</span><br />
            <span class="otheruser-text">This looks just like me!</span><br />
          </p>
        </div>
      </div>
      <div class="user-container">
        <div class="user-messages">
          <p>
            <span class="user-name">Trailblazer</span><br />
            <span class="user-reply"> It's you!</span><br />
          </p>
        </div>
        <div class="user-icon">
          <p>
            <span class="icon">
              <img src="https://i.imgur.com/73pSK7H.png" />
            </span>
          </p>
        </div>
      </div>
      <div class="user-container">
        <div class="user-messages">
          <p>
            <span class="user-name">Trailblazer</span><br />
            <span class="user-reply"
              >But I think this one looks more like you</span
            ><br />
          </p>
        </div>
        <div class="user-icon">
          <p>
            <span class="icon">
              <img src="https://i.imgur.com/73pSK7H.png" />
            </span>
          </p>
        </div>
      </div>
      <div class="otheruser-container">
        <div class="otheruser-icon">
          <p>
            <span class="icon">
              <img
                src="https://static.wikia.nocookie.net/houkai-star-rail/images/d/d3/Character_March_7th_Icon.png"
              />
            </span>
          </p>
        </div>
        <div class="otheruser-messages">
          <p>
            <span class="otheruser-name">March 7th</span><br />
            <span class="otheruser-text">?</span><br />
          </p>
        </div>
      </div>
      <div class="user-container">
        <div class="user-messages">
          <p>
            <span class="user-name">Trailblazer</span><br />
            <span class="user-img"
              ><img
                src="https://static.wikia.nocookie.net/houkai-star-rail/images/2/21/Sticker_PPG_01_March_7th_08.png"
            /></span>
          </p>
        </div>
        <div class="user-icon">
          <p>
            <span class="icon">
              <img src="https://i.imgur.com/73pSK7H.png" />
            </span>
          </p>
        </div>
      </div>
      <div class="otheruser-container">
        <div class="otheruser-icon">
          <p>
            <span class="icon">
              <img
                src="https://static.wikia.nocookie.net/houkai-star-rail/images/d/d3/Character_March_7th_Icon.png"
              />
            </span>
          </p>
        </div>
        <div class="otheruser-messages">
          <p>
            <span class="otheruser-name">March 7th</span><br />
            <span class="otheruser-text">Hahahahaha!</span><br />
          </p>
        </div>
      </div>
      <div class="otheruser-container">
        <div class="otheruser-icon">
          <p>
            <span class="icon">
              <img
                src="https://static.wikia.nocookie.net/houkai-star-rail/images/d/d3/Character_March_7th_Icon.png"
              />
            </span>
          </p>
        </div>
        <div class="otheruser-messages">
          <p>
            <span class="otheruser-name">March 7th</span><br />
            <span class="otheruser-text">That means I'm cute!</span><br />
          </p>
        </div>
      </div>
      <div class="alert">
        <p>
          <span class="mini_img"
            ><img
              src="https://static.wikia.nocookie.net/houkai-star-rail/images/e/ed/Icon_Dialogue_Warning.png"
            />
            Your minutes are almost up</span
          >
        </p>
      </div>
      <div class="otheruser-container">
        <div class="otheruser-icon">
          <p>
            <span class="icon">
              <img
                src="https://static.wikia.nocookie.net/houkai-star-rail/images/d/d3/Character_March_7th_Icon.png"
              />
            </span>
          </p>
        </div>
        <div class="otheruser-messages">
          <p>
            <span class="otheruser-name">March 7th</span><br />
            <span class="otheruser-img"
              ><img
                src="https://static.wikia.nocookie.net/houkai-star-rail/images/2/21/Sticker_PPG_01_March_7th_08.png"
            /></span>
          </p>
        </div>
      </div>
    </div>
  </div>
  <div class="grid-container"></div>
  <div class="messenger">
    <div class="messagebody">
      <div class="header">
        <p class="contact">Incident Logger</p>

        <p>
          <span class="tagline"
            >This is an automated system. Please send all mess...</span
          >
        </p>
      </div>
      <div class="otheruser-container">
        <div class="otheruser-icon">
          <p>
            <span class="icon">
              <img src="https://i.imgur.com/Js5buAc.png" />
            </span>
          </p>
        </div>
        <div class="otheruser-messages">
          <p>
            <span class="otheruser-name"
              >Incident Logger <span class="mini-time">10:00 a.m.</span></span
            ><br />
            <span class="otheruser-text"
              >[Incident #001]: Late Arrival in Reporting for Duty<br />
              <span class="text-mini-summary"
                >On [5 March], [Lieutenant Yanqing] arrived 10 minutes late to
                the Seat of Divine...</span
              ><br />
              <span class="text-link">[Full report]</span></span
            >
          </p>
        </div>
      </div>
      <div class="otheruser-container">
        <div class="otheruser-icon">
          <p>
            <span class="icon">
              <img src="https://i.imgur.com/Js5buAc.png" />
            </span>
          </p>
        </div>
        <div class="otheruser-messages">
          <p>
            <span class="otheruser-name"
              >Incident Logger <span class="mini-time">10:00 a.m.</span></span
            ><br />
            <span class="otheruser-text"
              >[Incident #002]: Refusal to Execute Assigned Task<br />
              <span class="text-mini-summary"
                >On [5 March], [Lieutenant Yanqing] refused to dust the
                bookshelves when...</span
              ><br />
              <span class="text-link">[Full report]</span></span
            >
          </p>
        </div>
      </div>
      <div class="otheruser-container">
        <div class="otheruser-icon">
          <p>
            <span class="icon">
              <img src="https://i.imgur.com/Js5buAc.png" />
            </span>
          </p>
        </div>
        <div class="otheruser-messages">
          <p>
            <span class="otheruser-name"
              >Incident Logger <span class="mini-time">10:00 a.m.</span></span
            ><br />
            <span class="otheruser-text"
              >[Incident #003]: Refusal to Execute Assigned Task<br />
              <span class="text-mini-summary"
                >On [5 March], [Lieutenant Yanqing] refused to clean the grout
                from between tiles in...</span
              ><br />
              <span class="text-link">[Full report]</span></span
            >
          </p>
        </div>
      </div>
      <div class="otheruser-container">
        <div class="otheruser-icon">
          <p>
            <span class="icon">
              <img src="https://i.imgur.com/Js5buAc.png" />
            </span>
          </p>
        </div>
        <div class="otheruser-messages">
          <p>
            <span class="otheruser-name"
              >Incident Logger <span class="mini-time">10:00 a.m.</span></span
            ><br />
            <span class="otheruser-text"
              >[Incident #004]: Failure to Comply with Patrol Protocol<br />
              <span class="text-mini-summary"
                >On [5 March], [Lieutenant Yanqing] patrolled areas outside the
                assigned...</span
              ><br />
              <span class="text-link">[Full report]</span></span
            >
          </p>
        </div>
      </div>
      <div class="otheruser-container">
        <div class="otheruser-icon">
          <p>
            <span class="icon">
              <img src="https://i.imgur.com/Js5buAc.png" />
            </span>
          </p>
        </div>
        <div class="otheruser-messages">
          <p>
            <span class="otheruser-name"
              >Incident Logger <span class="mini-time">10:00 a.m.</span></span
            ><br />
            <span class="otheruser-text"
              >[Incident #005]: Unauthorized Entry into Restricted Area<br />
              <span class="text-mini-summary"
                >On [5 March], [Lieutenant Yanqing] ignored commands not to go
                beyond the restricted zone...</span
              ><br />
              <span class="text-link">[Full report]</span></span
            >
          </p>
        </div>
      </div>
      <div class="otheruser-container">
        <div class="otheruser-icon">
          <p>
            <span class="icon">
              <img src="https://i.imgur.com/Js5buAc.png" />
            </span>
          </p>
        </div>
        <div class="otheruser-messages">
          <p>
            <span class="otheruser-name"
              >Incident Logger <span class="mini-time">10:00 a.m.</span></span
            ><br />
            <span class="otheruser-text"
              >[Incident #006]: Unauthorized Interaction with Unknown
              Individuals<br />
              <span class="text-mini-summary"
                >On [5 March], [Lieutenant Yanqing] conversed with unknown
                individuals in...</span
              ><br />
              <span class="text-link">[Full report]</span></span
            >
          </p>
        </div>
      </div>
    </div>
  </div>
</div>