JSFiddle - React, Tailwind, and code Playground

by phaneendra dvln

HTML

<div class="userlist">
		<ul>
			<li onclick="openChat(this)">user1</li>
                        <li onclick="openChat(this)">user2</li> 
                        <li onclick="openChat(this)">user3</li>
                        <li onclick="openChat(this)">user4</li>
                        <li onclick="openChat(this)">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){
var sendInput = form.input;
if(sendInput.value != ""){
	var message = sendInput.value;
	var username = document.getElementById("username").innerHTML;
	document.getElementById("textDisplay").innerHTML += username + ": " +message + "<br/>";
	sendInput.value = "";
}else{
return false;
}
}

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