JSFiddle - React, Tailwind, and code Playground

HTML

<div class="chat-window">
    <div class="chat-window-head"><span class="chat-window-head-title">Nelson Mandela</span>
    </div>
    <div class="chat-window-body">
        <div class="chat-window-conversation">
            <ul>
                <li>
                    <div class="chat-window-user-img">
                        <img src="http://www.docspt.com/avatars/Pessoas/Nelson%20Mandela.jpg" alt="">
                            
                    </div>
                    <span class="chat-window-user-message">1asdasdsadasdasdasdz\xdasdsaaaaaaaaaaaaaaaaaaaaaaaaaaaaaasadsdsdadsaadsdsadsadsaasdsdsasddas</span>
                </li>
            </ul>
        </div>
    </div>
</div>

CSS

body {
    background-color:black;
}
.chat-window {
    width:300px;
    height:280px;
    position:absolute;
}
.chat-window-head {
    background-color:#365a81;
    width:100%;
    height:30px;
    border:1px solid #57697e;
    position:relative;
}
.chat-window-body {
    background-color:#3c454f;
    width:300px;
    height:100%;
    border-color: #57697e;
    border-style: solid;
    border-width: 0px 1px 1px 1px;
    padding-top:3%;
    padding-bottom:7%;
}
.chat-window-conversation {
    background-color:white;
    width:95%;
    height:95%;
    margin: 0 auto;
}
.chat-message-write {
    width:95%;
    height:25px;
    margin: 0 auto;
    background-color:white;
    border:0px;
    border-top:1px solid gray;
}
.chat-message-write > textarea {
    width:98%;
    border:1px solid gray;
    border:0px;
    height:20px;
}
.chat-window-head-title {
    position:absolute;
    top:50%;
    margin-top:-8px;
    margin-left:5px;
    font-weight: bold;
    font-family:'Verdana', cursive;
    font-size: 13px;
    color: #fff;
}
ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
li {

    border-bottom:1px solid gray;
     text-align: left;
    display:block;
    overflow:auto;
}
.chat-window-user-img > img {
    height:50px;
    width:50px;
    float:left;
    padding:5px;
}
.chat-window-user-message{
   direction: ltr;    
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */    
   white-space: -pre-wrap;     /* Opera <7 */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
   border-collapse: collapse;
   border-spacing: 0;
   display:block;
   overflow:auto;
}