JSFiddle - React, Tailwind, and code Playground

by JessicaNorbach

HTML

<aside id="users_online">
			<ul>
      //php teste paar varios users
			<?php for($i=1; $i<=8; $i++):?>
				<li id="5">
					<div class="imgSmall"><img src="fotos/eu.jpg" border="0" /></div>
					<a href="#" id="3:5" class="comecar"> Jessica Norbach</a>
					<span id="5" class="status on"></span>
				</li>
             <?php endfor;?>
			</ul>
		</aside>

		<aside id="chats">

		</aside>

CSS

*{margin:0; padding:0; box-sizing:border-box;}
body{
	background:url(../fotos/fundofundo.jpg);
}
ul{list-style-type:none;}

#users_online{
	position:absolute;
	top:0;
	right:0;
	width:240px;
	height:100%;
	background: url(../fotos/fundo.png);
	border-left:1px solid #999;
	border-radius:10px 10px 0 0;
}
#users_online ul li{
	float:left;
	width:100%;
	border:1px solid transparent;
	padding:5px;
	margin-left:-1px;
	border-right:0;
	position:relative;
}
#users_online ul li:hover{
	border-color:#999;
	background:linear-gradient(to right, #ccc, #fff 60%);
}
#users_online ul li a{
	text-decoration:none;
	float:left;
	width:70%;
	margin-left:10px;
	font:16px Tahoma, arial, helvetica;
	color:#666;

	line-height:40px;
}
.imgSmall{
	float:left;
	width:44px;
	height:44px;
	overflow:hidden;
	border-radius:50%;
}
.imgSmall img{width:100%; height:100%;}
.status{
	position:absolute;
	right:8px;
	top:50%;
	width:12px;
	height:12px;
	margin-top:-6px;
	border-radius:50%;
	background:#666;
}
.status.off{background:#ccc;}
.status.on{background:#090;}

/**Aside dos chats **/
#chats{
	position:absolute;
	bottom:0;
	left:0;
	width:82%;
}

/**JANELAS**/
.window{
	float:left;
	width:270px;
	margin-left:5px;
	height:auto;
	overflow:hidden;
	border-radius:4px;
}

.window .header_window{
	float:left;
	background:#5bb947;
	padding:5px;
	width:270px;
	position:relative;
	cursor:pointer;
}
.window .header_window .close{
	text-decoration:none;
	float:left;
	color:white;
	font:16px Tahoma, arial;
	padding:0 10px 0 0;
}
.window .header_window .name{
	float:left;
	font:16px tahoma, arial;
	color:white;
}

.window .body{
	float:left;
	width:100%;
}

.window .body .mensagens{
	float:left;
	width:100%;
	background:#ebebeb;
	border-left:1px solid #999;
	border-right:1px solid #999;
	height:230px;
	overflow-y:auto;
	overflow-x:hidden;
	padding:4px;
}
.mensagens ul{
	float:left;
	width:100%;
}
.mensagens ul li{
	float:right;
	width:80%;
	background:linear-gradient(to bottom, #fff, #ccc 130%);
	border:1px...

JavaScript

jQuery(function(){
"use strict";



	function add_janela(id, nome, status){
		var janelas = Number(jQuery('#chats .window').length);
		var pixels = (270+5)*janelas;
		var style = 'float:none; position:absolute; bottom:0; left:'+pixels+'px';

		var splitDados = id.split(':');
		var id_user = Number(splitDados[1]);


		var janela = '<div class="window" id="janela_'+id_user+'" style="'+style+'">';
		janela += '<div class="header_window"><a href="#" class="close">X</a> <span class="name">'+nome+'</span> <span id="'+id_user+'" class="'+status+'"></span></div>';
		janela += '<div class="body"><div class="mensagens"><ul></ul></div>';
		janela += '<div class="send_message" id="'+id+'"><input type="text" name="mensagem" class="msg" id="'+id+'" /></div></div></div>';

		jQuery('#chats').append(janela);
	}


	jQuery('body').on('click', '#users_online a', function(){
		var id = jQuery(this).attr('id');
		jQuery(this).removeClass('comecar');

		var status = jQuery(this).next().attr('class');
		var splitIds = id.split(':');
		var idJanela = Number(splitIds[1]);
	
		if(jQuery('#janela_'+idJanela).length === 0){
			var nome = jQuery(this).text();
			add_janela(id, nome, status);
		}else{
			jQuery(this).removeClass('comecar');
		}
	});

	jQuery('body').on('click', '.header_window', function(){
		var next = jQuery(this).next();
		next.toggle(100);
	});

	jQuery('body').on('click', '.close', function(){
		var parent = jQuery(this).parent().parent();
		var idParent = parent.attr('id');
		var splitParent = idParent.split('_');
		var idJanelaFechada = Number(splitParent[1]);

		var contagem = Number(jQuery('.window').length)-1;
		var indice = Number(jQuery('.close').index(this));
		var restamAfrente = contagem-indice;

		for(var i = 1; i <= restamAfrente; i++){
			jQuery('.window:eq('+(indice+i)+')').animate({left:"-=275"}, 200);
		}
		parent.remove();
		jQuery('#users_online li#'+idJanelaFechada+' a').addClass('comecar');
	});

});