JSFiddle - React, Tailwind, and code Playground

by Praveen Kumar Purushothaman

HTML

<div id="chat">
        <div id="chat_msgs_box">
            <div class="chat_msg">
                <img src="http://cdn.akamai.steamstatic.com/steamcommunity/public/images/avatars/23/235c118dcb0543d96ad190eb7f97d67723f9918b_full.jpg">
                <div class="chat_msg_login">irqize</div>
                <div class="chat_msg_msg">XD Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime at accusantium enim voluptas nostrum recusandae, temporibus aliquam voluptatibus, error facere, numquam? Quia omnis ullam quae delectus, officiis voluptates consectetur. Laboriosam.</div>
            </div>
            <div class="chat_msg">
                <img src="http://cdn.akamai.steamstatic.com/steamcommunity/public/images/avatars/23/235c118dcb0543d96ad190eb7f97d67723f9918b_full.jpg">
                <div class="chat_msg_login">irqize</div>
                <div class="chat_msg_msg">XD</div>
            </div>
            <div class="chat_msg">
                <img src="http://cdn.akamai.steamstatic.com/steamcommunity/public/images/avatars/23/235c118dcb0543d96ad190eb7f97d67723f9918b_full.jpg">
                <div class="chat_msg_login">irqize</div>
                <div class="chat_msg_msg">XD</div>
            </div>
            <div class="chat_msg">
                <img src="http://cdn.akamai.steamstatic.com/steamcommunity/public/images/avatars/23/235c118dcb0543d96ad190eb7f97d67723f9918b_full.jpg">
                <div class="chat_msg_login">irqize</div>
                <div class="chat_msg_msg">XD</div>
            </div>
            <div class="chat_msg">
                <img src="http://cdn.akamai.steamstatic.com/steamcommunity/public/images/avatars/23/235c118dcb0543d96ad190eb7f97d67723f9918b_full.jpg">
                <div class="chat_msg_login">irqize</div>
                <div class="chat_msg_msg">XD</div>
            </div>
            <div class="chat_msg">
                <img...

CSS

.chat_msg{
    position: relative;
    margin-top: 5px;
    width: 300px;
    clear: both;
    
}
.chat_msg img{
    width: 48px;
    height: 48px;
    
    margin: 5px;
    float: left;
}
.chat_msg_login{
    font-weight: bold;
}
.chat_msg_msg{
    text-align: justify;
}
#chat{
    height: 400px;
    width: 300px;
    border-width:5px;
    border-style:dashed;
}
#chat_msgs_box{
    height:400px;
    overflow: auto;
    overflow-x: hidden;
}