JSFiddle - React, Tailwind, and code Playground

HTML

<div id="chat-messages-list">
    <div class="message-row me arrow" data-messageid="1" data-senderid="1001">
        <div class="message-sender" onclick="_chatUserDetails(1001)"><div class="chat-avatar" style="background-image: url(https://i.pinimg.com/originals/11/54/5b/11545b03970ce036070c48944c1aa66e.jpg);"></div></div>
        <div class="message-container">
            <div class="chat-username">seyit55</div>
            <div class="chat-message">Hello!</div>
        </div>
        <div class="message-time">17:00</div>
    </div>
    <div class="message-row me" data-messageid="2" data-senderid="1001">
        <div class="message-sender" onclick="_chatUserDetails(1001)"><div class="chat-avatar" style="background-image: url(https://i.pinimg.com/originals/11/54/5b/11545b03970ce036070c48944c1aa66e.jpg);"></div></div>
        <div class="message-container">
            <div class="chat-username">seyit55</div>
            <div class="chat-message">How Are you ?</div>
        </div>
        <div class="message-time">17:00</div>
    </div>
    <div class="message-row you arrow" data-messageid="3" data-senderid="1012">
        <div class="message-sender"><div class="chat-avatar" style="background-image: url(https://www.romania-insider.com/sites/default/files/featured_images/teenager-laptop-sxchu.jpg);"></div></div>
        <div class="message-container">
            <div class="chat-username" >jackertools</div>
            <div class="chat-message">Hello :)</div>
        </div>
        <div class="message-time">17:00</div>
    </div>
    <div class="message-row you arrow" data-messageid="4" data-senderid="1015">
        <div class="message-sender"><div class="chat-avatar" style="background-image: url(https://www.mantruckandbus.com/fileadmin/media/bilder/02_19/219_05_busbusiness_interviewHeader_1485x1254.jpg);"></div></div>
        <div class="message-container">
            <div class="chat-username">alex</div>
            <div class="chat-message">Hello!</div>
     ...

CSS

body{
        margin: 0;
        padding: 15px 0px;
        font-family: sans-serif;
        font-size: 15px;
    }

    #chat-messages-list .message-row{
        display: flex;
        word-wrap: break-word;
        margin-bottom: 2px;
        padding-left: 20px;
        padding-right: 20px;
        position: relative;
    }
    #chat-messages-list .message-row:hover .message-time{
        opacity: 1;
    }
    #chat-messages-list .message-row .chat-avatar{
        display: block;
        border-radius: 50%;
        width: 28px;
        height: 28px;
        flex-direction: column;
        background-repeat: no-repeat;
        background-position: center center;
        background-color: #eff0f1;
        background-size: cover;
    }

    #chat-messages-list .message-row .message-container{
        position: relative;
        padding: 6px 12px;
        box-sizing: border-box;
        word-break: break-word;
        border-bottom-left-radius: 1.25rem;
        border-bottom-right-radius: 1.25rem;
        border-top-left-radius: 1.25rem;
        border-top-right-radius: 1.25rem;
    }
    #chat-messages-list .message-row .message-time{
        display: flex;
        align-items: center;
        margin: 0 10px;
        font-size: 12px;
        color: var(--black-400);
        text-align: left;
        opacity: 0;
        transition: opacity 275ms;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    #chat-messages-list .message-row.arrow {
        margin-top: 10px;
    }

    #chat-messages-list .message-row:not(.arrow) .message-sender,
    #chat-messages-list .message-row.me .message-sender,
    #chat-messages-list .message-row:not(.arrow) .chat-username,
    #chat-messages-list .message-row.me .chat-username {
        display: none;
    }


    #chat-messages-list .message-row.me{
        flex-direction: row-reverse;
    }
    #chat-messages-list .message-row.me .message-container {
...