JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<link href="//fonts.googleapis.com/css?family=Lato:300,400,700,900|Pacifico" rel="stylesheet" type="text/css">
    
    
    <div class="widget">
       <div class="chat">
           <div class="chatLine chatLineLtr">
               <div class="chatAvatar"></div>
               <div class="chatText"><span>You</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
           </div>
           <div class="chatLine chatLineRtl">
               <div class="chatAvatar"></div>
               <div class="chatText"><span>Me</span> Lorem ipsum dolor sit.</div>
           </div>
           <div class="chatLine chatLineLtr">
               <div class="chatAvatar"></div>
               <div class="chatText"><span>You</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem fugit laudantium natus pariatur sint atque ipsum quisquam harum. Repudiandae iusto.</div>
           </div>
       </div>
        <div class="chatInputBox">
            <input type="text" placeholder="Enter your message here..." class="chatInput" />
        </div>
    </div>

CSS

*, *:after, *:before {
    box-sizing: border-box;
}

body {
    font-family: lato;
    background: #eee;
}

.widget {
    background: #fff;    
    width: 310px;
    margin: 0 auto;
    padding: 17px;
}

.chat {
    line-height: 1.4;
    padding-bottom: 8px;
    color: #888;
}

.chatLine {
    overflow: hidden;
    padding-bottom: 21px;
}

.chatAvatar {
    height: 38px;
    width: 38px;
    float: left;
    border-radius: 3px;
    background: #EEE;
}

.chatLineLtr .chatAvatar {
    float: left;
}

.chatLineRtl .chatAvatar {
    float: right;
}

.chatLineLtr .chatText {
    margin-left: 52px;
}

.chatLineRtl .chatText {
    margin-right: 52px;
}

.chatText > span {
    display: block;
    margin-top: -2px;
    font-weight: 600;
    color: #444;
}

.chatInput {
    font: inherit;
    border: 0;
    background: #EEE;
    width: 100%;
    padding: 10px 10px 12px;
}