JSFiddle - React, Tailwind, and code Playground

by Igaojsfiddle

HTML

<div id="masterChatWin">
    <div class="headerChatWin"></div>
    <div class="bodyChatWin">
        <div class="areaReceivedMessagesWin">
            <ul id="receivedMessagesListWin">
                
            </ul>
        </div>
        <div class="areaToSendWin">
            <textarea name="comment" id="msgArea" form="usrform"></textarea>
        </div>
    </div>
</div>

CSS

.headerChatWin {
    width:300px;
    height:40px;
    background-color:cyan;
}
.bodyChatWin {
    width:300px;
    height:300px;
    background-color:gray;
}
.areaReceivedMessagesWin {
    width:290px;
    height:250px;
    background-color:white;
    margin-left:5px;
}
.areaToSendWin {
    margin-left:5px;
}
.areaToSendWin textarea {
    width:285px;
    height:30px;
    margin-top:5px;
}
ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
li{
  margin-left:5px;
  border-bottom:1px solid gray;  
}

JavaScript

$('#masterChatWin').keypress(function (e) {
            if (e.which == 13) {
               $("#receivedMessagesListWin").append('<li>'+ $('#msgArea').val() +'</li>');
                $('#msgArea').val('')
            }
 });