JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div class='ChatTitle'></div>
    <div class="bgTitle">&nbsp;</div>
    
	<div id="chat-master">
		<div class="chatHeader"></div>
		<div class="chatBody">
			<div id="searchArea">
				<div class="controls">
					<div class="input-prepend">
					  <span class="add-on"><i class="icon-search"></i></span>
					  <input class="span2" id="searchText" style="width:200px;" type="text">
					</div>
				</div>
			</div>
			<ul id="navlist">
				<li data-status="1">
					<div class="frdImage">
						<img src="http://www.docspt.com/avatars/Pessoas/Nelson%20Mandela.jpg" alt="">
					</div> 
					<span class="frdName">Nelson Mandela</span>
					<div>
						<span class="frdStatusIndicator"></span>
						<span class="frdStatusName">Online</span>
					</div>
				</li>
				<li data-status="2">
					<div class="frdImage">
						<img src="http://m3.licdn.com/mpr/mpr/shrink_80_80/p/1/000/192/055/09bd7cd.jpg" alt="">
					</div> 
					<span class="frdName">Mahatma Gandhi</span>
					<div>
						<span class="frdStatusIndicator"></span>
						<span class="frdStatusName">Idle</span>
					</div>
				</li>
				<li data-status="3">
					<div class="frdImage">
						<img src="http://www.cosmobrain.com.br/cosmoforum/images/avatars/gallery/Cientistas/einstein2.gif" alt="">
					</div> 
					<span class="frdName">Albert Einstein</span>
					<div>
						<span class="frdStatusIndicator"></span>
						<span class="frdStatusName">Busy</span>
					</div>
				</li>
				<li data-status="4">
					<div class="frdImage">
						<img src="http://www.quotationsource.com/uploads/authors/Charlie-Chaplin-37-s.jpg" alt="">
					</div> 
					<span class="frdName">Charlie Chaplin</span>
					<div> 
						<span class="frdStatusIndicator"></span>
						<span...

CSS

/*-------------------------
	Simple reset
--------------------------*/
*{
	margin:0;
	padding:0;
}

body {
    background-image:url('http://subtlepatterns.com/patterns/escheresque_ste.png');
    margin:0;
}
#chat-master{
    position:absolute;
    bottom:0;
	width:100%;
	margin: 0;
    padding: 0;
	float:left;
}
.chatHeader{
    height:10px;
	background-color:#7ac943;
	margin: 0;
    padding: 0;
}
.chatBody {
    height:150px;
    background-color:#3c454f;
    /*border-top: 10px solid #7ac943;*/
	overflow:auto;
}
#navlist li {
    display: inline-block;
    width:240px;
    padding:5px;
	margin: 0;
    margin: 15px;
    list-style-type: none;
    position:relative;
}
#navlist li:hover {
    background-color:#616c78;
    border-radius:5px;
}
li > .frdImage {
    position: relative;
    /*margin-top:-25px;*/
    top:50%;
    float:left;
    border-radius: 6px;
    border: solid 2px #aaa;
    height:85px;
    width:85px;
    background-color:white;
    margin-right:10px;
}
li > span.frdName {
    position:absolute;
    float:left;
    margin-top:10px;
    font-weight: bold;
    font-family:'Verdana', cursive;
    font-size: 15px;
    color: white;
    margin-right:200px;
    width: 200px;
}
li > div.frdImage >img {
    border-radius:6px;
    position:absolute;
    top:0;
    bottom:0;
    right:0;
    left:0;
    margin:auto;
}
.frdStatusIndicator {
    float:left;
    margin-top:40px;
    height:10px;
    width:10px;
    background-color: #7ac943;
    border-radius: 10px;
}
.frdStatusName {
    float:left;
    margin-top:40px;
    border-radius: 10px;
    font-family:'Verdana', cursive;
    font-size: 12px;
    color: white;
    line-height:15px;
    padding-left:5px;
}
.online {
    background-color: #7ac943;
    border:2px solid #3c7c0f;
}
.busy {
    background-color: #ff4040;
    border:2px solid #ff1717;
}
.idle {
    background-color: #ff8636;
    border:2px solid #ff6500;
}
.offline {
    background-color:#d4d4d4;
    border:2px solid #9e9e9e;
}
.bgTitle{
  ...

JavaScript

$(document).ready(function () {

    $("#navlist li").each(function (index) {
        var userStatusType = +$(this).data('status'); //Conversão para Número (+)
        var statusIndicator = $(this).find(".frdStatusIndicator");
        var userImage = $(this).children('.frdImage');
        if (userStatusType == 1) {
            statusIndicator.addClass('frdStatusIndicator online');
            userImage.css('border', '3px solid #7ac943');
        } else if (userStatusType == 2) {
            statusIndicator.addClass('frdStatusIndicator idle');
            userImage.css('border', '3px solid #ff8636');
        } else if (userStatusType == 3) {
            statusIndicator.addClass('frdStatusIndicator busy');
            userImage.css('border', '3px solid #ff4040');
        } else if (userStatusType == 4) {
            statusIndicator.addClass('frdStatusIndicator offline');
            userImage.css('border', '3px solid #d4d4d4');
        }
    });
	
	
	$('#searchText').on('keyup',function(){
		  var text = $(this).val();
		  $("#navlist li").each(function (index) {
			if ($(this).find(".frdName").is(':contains('+text+')')) {
				$(this).slideDown(50);
			} else {
				$(this).slideUp(50);
			}
		  });
	});
	
	$(".chatHeader").on('click',function(){
	   $('.chatBody').slideToggle();
	});
	
	$.expr[":"].contains = $.expr.createPseudo(function(arg) {
		return function( elem ) {return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;};
	});
	
});