JSFiddle - React, Tailwind, and code Playground

by igos

HTML

<link rel="stylesheet" href="https://rawgit.com/marvelapp/devices.css/master/assets/devices.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="marvel-device iphone6 silver">
    <div class="top-bar"></div>
    <div class="sleep"></div>
    <div class="volume"></div>
    <div class="camera"></div>
    <div class="sensor"></div>
    <div class="speaker"></div>
    <div class="screen">
        
<div class="arrow"></div>
<ul class="messageLog" id="chatMessage">
   </ul>
    </div>
    <div class="home"></div>
    <div class="bottom-bar"></div>
</div>

CSS

.marvel-device .screen {
  color: black;
}

a {
  color: white;
}
a:visited {
  color: white;
}


ul.messageLog {
  list-style: none;
  padding:0px;
  padding-top: 10px;
  -webkit-padding-start: 0px;
}

.messageLog {
  margin-top: 0px;
}
.messageLog .messageLogEntry {
  margin: .5em;
}

.messageLogEntry {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  max-width: 100%;
}

.messageLogEntry.messageLogMe {
  flex-direction: row-reverse;  
}

.messageLogAvatar {
  flex-shrink: 0;
  flex-grow: 0;
  z-index: 1;
  height: 50px;
  width: 50px;
  border-radius: 25px;
  
}

.messageLogEntry.messageLogMe 
.messageLogAvatar {
  display: none;
}

.messageLogEntry .messageLogMsg {
  position: relative;
  margin: 0 12px;
}

.messageLogEntry .messageLogMsg::before {
  position: absolute;
  right: auto;
  bottom: .6em;
  left: -12px;
  height: 0;
  content: '';
  border: 6px solid transparent;
  border-right-color: #ddd;
  z-index: 2;
}

.messageLogEntry.messageLogMe .messageLogMsg::before {
  right: -12px;
  bottom: .6em;
  left: auto;
  border: 6px solid transparent;
  border-left-color: #08f;
}

.messageLogMsg {
  background-color: #ddd;
  padding: .5em;
  border-radius: 4px;
  font-weight: lighter;
  max-width: 70%;
}

.messageLogEntry.messageLogMe .messageLogMsg {
  border-top: 1px solid #07f;
  border-bottom: 1px solid #07f;
  background-color: #08f;
  color: #fff;
}

.messageLogMsg .messageLogTimestamp {
  display: none;
}
.messagePoints{
    padding-top: 18px;
    padding-bottom: 0px;
}
.point{
    position:relative;
    float:left;
    border-radius:50%;
    width:6px;
    height:6px;
    background:#ccc;
    margin:0px 2px;
}

.point1 {
	animation-name: upd;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
    animation-delay:0s;
}
.point2{
	animation-name: upd1;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
    animation-delay:0.10s;
}
.point3...

JavaScript

var messenger = {
	startPos : 0
};

messenger.userReply = function(text) {
	$('#chatMessage').append('<li class="messageLogEntry"><img class="messageLogAvatar" src="//placekitten.com/g/50/50" /><p class="messageLogMsg messagePoints"><a class="point point1" href="#"></a><a class="point point2" href="#"></a><a class="point point3" href="#"></a>&nbsp;<time class="messageLogTimestamp">6 minutes ago</time></p></li>');
  var t = $('#chatMessage li:last').find(".messageLogMsg");
  setTimeout(function() {  
    t.removeClass('messagePoints');
    t.html(text); 
  },800);
}

messenger.botReply = function(text) {
$('#chatMessage').append('<li class="messageLogEntry messageLogMe"><img class="messageLogAvatar" src="//placekitten.com/56/56" /><p class="messageLogMsg">'+text+'<time class="messageLogTimestamp">4 minutes ago</time></p></li>');
}

messenger.texts = [
	{text: "Dzień dobry. Rozchorawała mi się córka. Czy jest dostępna na dziś jakaś opiekunka?", me: false, avatar:"//placekitten.com/56/56"},
  {text: "Dzień dobry. Tak, są dostępne. Proszę o podanie swojego adresu.", me: true, avatar:"//placekitten.com/56/56"},
  {text: "ul. Żytnia 4/54", me: false, avatar:"//placekitten.com/56/56"},
  {text: "Dostępna jest Pani Stanisława (dojazd do 30 min) i Pani Kaja (dojazd do 1h30min).", me: true, avatar:"//placekitten.com/56/56"},
  {text: "Poproszę Panią Stanisławę.", me: false, avatar:"//placekitten.com/56/56"},
  {text: "Zlecenie nr 523 przyjęte.", me: true, avatar:"//placekitten.com/56/56"},
  {text: "Pani Stanisława będzie o 14:30 na ul. Żytniej 4/54.", me: true, avatar:"//placekitten.com/56/56"}
];


messenger.doChat = function() {
  var msg = messenger.texts[messenger.startPos];
	var offset = 0;
  
  if(msg.me) {
  	messenger.botReply(msg.text);
  } else {
    offset = 800;
    messenger.userReply(msg.text);
  }
	
	messenger.startPos++;
	if(messenger.startPos < messenger.texts.length) {
		setTimeout(messenger.doChat, offset + 1000 + Math.floor((Math.random() * 300) +...