JSFiddle - React, Tailwind, and code Playground

HTML

<div id = "mainblock" class="container">
</div>  
   
<div>
    <form id = "wth" class="form-wrapper cf">
        <input onfocus="focusFunction()" id="myMessage" type="text">
        <button onclick="sendMessage()" type="button">Send</button>
	</form>
</div>

CSS

.container {
  padding: 40px 20px;
  margin: 0 auto;
  max-width: 100%;
  overflow:auto;
}
 
 
 
/** ios1-ios6 bubbles **/
.bubble {
  box-sizing: border-box;
  float: left;
  width: 250px;
  max-width: 500%;
  position: relative;
  clear: both;
 
  background: #95c2fd;
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.15, #bee2ff), color-stop(1, #95c2fd));
  background-image: -webkit-linear-gradient(bottom, #bee2ff 15%, #95c2fd 100%);
  background-image: -moz-linear-gradient(bottom, #bee2ff 15%, #95c2fd 100%);
  background-image: -ms-linear-gradient(bottom, #bee2ff 15%, #95c2fd 100%);
  background-image: -o-linear-gradient(bottom, #bee2ff 15%, #95c2fd 100%);
  background-image: linear-gradient(bottom, #bee2ff 15%, #95c2fd 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#95c2fd', endColorstr='#bee2ff');
 
  border: solid 1px rgba(0,0,0,0.5);
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
 
  -webkit-box-shadow: inset 0 8px 5px rgba(255,255,255,0.65), 0 1px 2px rgba(0,0,0,0.2);
  -moz-box-shadow: inset 0 8px 5px rgba(255,255,255,0.65), 0 1px 2px rgba(0,0,0,0.2);
  box-shadow: inset 0 8px 5px rgba(255,255,255,0.65), 0 1px 2px rgba(0,0,0,0.2);
  margin-bottom: 20px;
  padding: 6px 20px;
  color: #000;
  text-shadow: 0 1px 1px rgba(255,255,255,0.8);
  word-wrap: break-word;
}

.bubble-alt {
  float: right;
}
.bubble-alt1 {
  float: left;
}
.bubble-alt:before {
  left: auto;
  right: -7px;
}
.bubble-alt:after {
  left: auto;
  right: -5px;
}
 
.bubble p {
  font-size: 0.85em;
}

/* yellow bubble */
.yellow {
  background: #7acd47;
  background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.15, #fcf3c3),color-stop(1, #f4e371));
  background-image: -webkit-linear-gradient(bottom, #fcf3c3 15%, #f4e371 100%);
  background-image: -moz-linear-gradient(bottom, #fcf3c3 15%, #f4e371 100%);
  background-image: -ms-linear-gradient(bottom, #fcf3c3 15%,...

JavaScript

function sendMessage()
{
    //asssuming there is a user with this id in your "Buddies" contact list
	var myDate = new Date().toTimeString().replace(/.*(\d{2}:\d{2}:\d{2}).*/, "$1");
	var mm = document.getElementById("myMessage").value;
	var mainDiv = document.getElementById("mainblock");
	var para = document.createElement("p");
	var node = document.createTextNode(myDate+"(Me) :"+mm);
	para.appendChild(node);
	var element = document.createElement('div');
	element.appendChild(para);
	element.className = 'bubble bubble-alt yellow';
	mainDiv.appendChild(element);    
}