JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="chat-wrapper">
  <div class="chat-holder">
  1      <div class="chat-header">
            <i class="fa fa-circle text-success"></i> Chat (2)
        </div>
        <div class="chat-box">
          <div class="media chat-user-item chat-user-1" data-user="1" data-uname="user-1" data-from="user-2">
            <div class="media-left">
            <a href="#">
            <img class="media-object img-circle" src="' . $userPic .'.jpg" alt="..." style="width:50px">
            </a>
          </div>
           <div class="media-body">
            <h4 class="media-heading">User Name 1</h4>
            <small>User Role</small>
            </div>
            </div>
            <div class="media chat-user-item chat-user-2" data-user="2" data-uname="user-2" data-from="user-2">
            <div class="media-left">
            <a href="#">
            <img class="media-object img-circle" src="' . $userPic .'.jpg" alt="..." style="width:50px">
            </a>
          </div>
           <div class="media-body">
            <h4 class="media-heading">User Name 2</h4>
            <small>User Role</small>
            </div>
            </div>
        </div>
    </div>
  </div>

CSS

/* Chat */
.chat-wrapper {
	position: fixed;
    bottom: 0px;
    right: 0px;
    z-index: 2;
}
.chat-holder {
	bottom: 0px;
	position: absolute;
    width: 350px;
    float: right;
    right: 0px;
    z-index: 1000;
}
.chat-header {
    line-height:29px;
    background-color: #337ab7;
    z-index: 10000000;
    font-size: 15px;
    padding: 10px;
    color: #FFFFFF;
    font-weight: 800;
    border: 1px solid #999;
}
.chat-header i {
	color:lightgreen;
}
.chat-box {
	background-color: #FFF;
	border: 1px solid #888;
	height:480px;
}
.chat-box .chat-user-item {
	padding:10px;
	margin:0px;
}
.chat-box .chat-user-item:hover {
	background-color: #DDD;
}
.chat-user-holder {
  display: none;
	bottom: 0px;
	position: absolute;
    width: 350px;
    float: right;
    right: 350px;
    z-index: 1000;
}
.chat-user-header {
    line-height:29px;
    background-color: #337ab7;
    z-index: 10000000;
    font-size: 15px;
    padding: 10px;
    color: #FFFFFF;
    font-weight: 800;
    border: 1px solid #999;
}
.chat-user-header i {
	color:lightgreen;
}
.chat-user-header .fa-close{
	line-height: 29px;
	color:#DDD;
}
.chat-user-box {
	background-color: #FFF;
	border: 1px solid #888;
	height:431px;
}
.rcv {
    float: left;
    position: block;
    background-color: #CCC;
    color: #333;
    padding: 5px 10px;
    margin: 5px;
    border-radius: 10px;
    font-weight: 700;
    margin-left: 10px;
}
.snt {
    float: right;
    position: block;
    background-color: rgb(60, 141, 188);
    color: #FFF;
    padding: 5px 10px;
    margin: 5px;
    border-radius: 10px;
    font-weight: 700;
    margin-right: 10px;
}
.msgHolder .form-control {
	padding: 15px;
	height: 49px;
    border: 1px solid #999;
    border-top: none;
}

/* FOOTER */
.main-footer {
	position: fixed;
    bottom: 0px;
    width: 100%;
    z-index: 1;
    margin-left: 0px
}

JavaScript

$(document).on('load',function(){  /* hide elements on load */
  $('.chat-box').css('display','none'),
  $('.chat-user-holder').hide(),
  $('.msgHolder').hide(500)
  });
  
  $('.chat-header').click(function(){ /* chat list open */
    $('.chat-box').slideToggle(500); 
  });
  
  $.each($('.chat-user-item'), function(i, el){
    var $el = $(el);
    var fromUID = $el.data("user");
    var fromUname = $el.data("uname");
    var boxName = '.chat-' + fromUname;
    var userID = $el.data('from');
  
    function update() {
      $.ajax({ /* update ajax call */
        data: {
          touid: userID,
          fromuid: fromUID
        },
        url: '/echo/html/',
        method: 'POST',
        dataType: "html",
        cache: false,
        success: function(response){                    
            $(".chat-user-box").html(response); 
        }
      });
      $('.chat-user-box').scrollTop($('.chat-user-box').prop("scrollHeight"));
    }
  
    $(document).ready(function(){
        setInterval(function() {
           update();
        }, 1000);
    });
    
    var chatBox = $('#' + fromUID);
    
    if(chatBox.length === 0){
       chatBox = $('.chat-wrapper').append('<div id="' + fromUID + '" class="chat-user-holder"><div class="chat-user-header"><i class="fa fa-circle text-success"></i> <span class="box-userName">' + fromUname + '</span> <a class="dismiss-chat" href=""><i class="fa fa-close pull-right "></i></a></div><div class="chat-user-box slimScroll">' + fromUname + '</div><div class="msgHolder"><input class="form-control sendMessage" placeholder="Scrivi Messaggio..."/></div></div>');
    }
  
    $(boxName).click(function() { /* user chat box open */
      $('.chat-user-holder').not('#' + fromUID).hide();
      $('#' + fromUID).toggle().find('.chat-user-box').hide().slideToggle(500);
    
      $.ajax({ /* Ajax call get username */
        data: {
          uname : fromUID,
        },
        url: '/echo/html/john',
        method: 'POST',
       ...