JSFiddle - React, Tailwind, and code Playground

by Ayadi Baha Eddine

HTML

<div class="panel-body fixed-panel" id="chat-area">
            <div class="row">
                <div class="chat-message chat-left">
                  <p class="message-heading">harry</p>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
                </div>
            </div>
            <div class="row">
                <div class="chat-message chat-right pull-right">
                  <p class="message-heading">tom</p>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
                </div>
            </div>
            <div class="row">
                <div class="chat-message chat-left">
                  <p class="message-heading">harry</p>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
                </div>
            </div>
            <div class="row">
                <div class="chat-message chat-left">
                  <p class="message-heading">harry</p>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
                </div>
            </div>
            <div class="row">
                <div class="chat-message chat-right pull-right">
                  <p class="message-heading">tom</p>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
                </div>
            </div>
          </div>
<input type="text" id="message"><button id="send">Send</button>

CSS

#chat-area{
    padding:5px;
    border:solid #000;
    border-radius : 10px;
}

JavaScript

$("#send").click(function() {
var message = $("#message").val();
var addMessage = "<div class='row'><div class='chat-message chat-right pull-right'><p class='message-heading'>tom</p><p>" + message + "</p></div></div>";
$("#chat-area").append(addMessage);
});