JSFiddle - React, Tailwind, and code Playground

HTML

<div class="userlist">
		<ul>
			<li onclick="openChat('user1',1)">user1</li>
            <li onclick="openChat('user2',2)">user2</li>
            <li onclick="openChat('user3',3)">user3</li>
            <li onclick="openChat('user4',4)">user4</li>
            <li onclick="openChat('user5',5)">user5</li>
		</ul>
	</div>

<div id="main"></div>

CSS

*{
	margin:0;
	padding: 0;
}

ul,li{
	list-style-type: none;
}

body{
	font-family: arial;
}

#main{
	position: absolute;
	right: 25%;
	bottom: 0;
}


.chat-app{
	width: 250px;
	border: 1px solid #ccc;
	margin:25px;
	overflow: hidden;
	float:right;
}

.chat-icons{

height: 60px;
}

.chat-icons .username{
	background: #000;
	height: 30px;
	color: #fff;
	display: block;
	line-height: 30px;
	padding-left: 10px;
}

.chat-icons .settings{
	background: #ddd;
	height: 30px;
	color: #fff;
	display: block;
	line-height: 30px;
	padding-left: 10px;
}

.chat-window{
height: 220px;
font-size: 14px;
overflow-y:scroll;
}

.chat-window p{
	font-size: 14px;
	line-height: 25px;
	padding: 10px;
}

.chat-inputs{
	
}

.chat-icons ul{
	float: right;
}

.chat-icons li{
	
float: left;
	
list-style: none;
	
margin: 0 10px;
}


.userlist{
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	border-left: 1px solid #ddd;
	width: 200px;
}

.userlist li{
line-height: 35px;padding: 10px;border-bottom: 1px solid #ddd;}

JavaScript

function chatSubmit(form, userId) {

       var Pid = "textDisplay"+userId;
        var sendInput = form.input;
        if (sendInput.value != "") {
            var message = sendInput.value;
            var username = document.getElementsByClassName(Pid)[0].innerHTML;
            document.getElementById(Pid).innerHTML += username + ": " + message + "<br/>";
            sendInput.value = "";
        } else {
            return false;
        }
    }

    function openChat(userName, userId) {
         
          var Pid = "textDisplay"+userId;
        var user = document.createElement("div");
        user.className = "chat-app";
        user.innerHTML = '<form name="form"><div class="chat-icons"><div class="username"><span class='+Pid+'>' + userName
        + '</span></div><div class="settings"></div></div><div class="chat-window"><p id="'+Pid+'"></p></div><div class="chat-inputs"><input type="text" value="" id="input" /><input type="button" value="send" onClick = "chatSubmit(this.form,'+userId+
            ')"/></div></form>';
        document.getElementById("main").appendChild(user);
    }