JSFiddle - React, Tailwind, and code Playground

by Quint Rahaman

HTML

<ul id="thread-list" class="group-message-thread">
    <li>
        <div class="message-wrap group-messages-highlight">
            <div class="avatar-wrap"></div>
            <div class="message-content">
                <div class="message-content-wrap">
                  <p>This is content in the first message</p>
                </div>
            </div>
        </div>
    </li>

    <li>
        <div class="message-wrap">
            <div class="avatar-wrap"></div>
            <div class="message-content">
                <div class="message-content-wrap">
                  <p>This is content in the second message</p>
                </div>
            </div>
        </div>
    </li>

    <li>
        <div class="message-wrap">
            <div class="avatar-wrap"></div>
            <div class="message-content">
                <div class="message-content-wrap">
                    <p>This is content in the third message</p>
                    <p>some text</p>
                </div>
            </div>
        </div>
    </li>

    <li>
        <div class="message-wrap">
            <div class="avatar-wrap"></div>
            <div class="message-content">
                <div class="message-content-wrap">
                    <p>This is content in the fourth message</p>
                    <p>some more text</p>
                </div>
            </div>
        </div>
    </li>
    
</ul>

CSS

ul {
  list-style-type: none;
}

.message-content-wrap {
  background-color: red;
}