JSFiddle - React, Tailwind, and code Playground

by Igaojsfiddle

HTML

<div class="main">
    <div class="header"></div>
    <div class="right-bar">
       <ul>
           <li>
                <img class="frdImage imageclass" src='http://d13yacurqjgara.cloudfront.net/users/25963/avatars/mini/2013-avatar_(1).png' /> 
               <span class="frdName">Fulano da Silva</span>
               <div class="zica"><div class="badge red">8</div></div>
                <span class="chat-user-status online"></span>
           </li>
           <li>
                <img class="frdImage pixelated"  src='http://www.webix.com.br/fotos/imagens/cartoons/puroosso.jpg' /> 
               <span class="frdName">Puro Osso</span>
               <div class="zica"><div class="badge red">99</div></div>
                <span class="chat-user-status idle"></span>
           </li>
           <li>
                <img class="frdImage" src='https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQ0ldhOuTtwuP6f5W4orlChDacSd_DhIx76q0FY4T0QEiVO11i1' /> 
               <span class="frdName">Cão Covarde</span>
               <div class="zica"><div class="badge red">8</div></div>
                <span class="chat-user-status offline"></span>
           </li>
           
           
       </ul>
    </div>
</div>

CSS

html, body {
    margin:0;
    height: 100%
}
.main {
    position: relative;
    background-color:#383f59;
    width:100%;
    height:100%;
}
.header {
    width:100%;
    height:35px;
    background-color:#668bcc;
}
.right-bar {
    /*width:35%;*/
    background-color:#f5f8fa;
    float:right;
    height: 100%;
    /* para falta de suporte */
    height: -webkit-calc(100% - 35px);
    /* para Chrome */
    height: -moz-calc(100% - 35px);
    /* para Firefox */
    height: calc(100% - 35px);
    /* para suporte nativo */
}
/* @font-faces imports */
 @font-face {
    font-family:'Amatic SC';
    font-style: normal;
    font-weight: 400;
    src: local('Amatic SC Regular'), local('AmaticSC-Regular'), url(http://themes.googleusercontent.com/static/fonts/amaticsc/v3/DPPfSFKxRTXvae2bKDzp5D8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
/* Reset CSS */
 body, div {
    margin: 0;
    padding: 0;
}
.frdList {
    height: 100%;
    /* para falta de suporte */
    height: -webkit-calc(100% - 35px);
    /* para Chrome */
    height: -moz-calc(100% - 35px);
    /* para Firefox */
    height: calc(100% - 35px);
    /* para suporte nativo */
    width:500px;
}
ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

li {
    color: #fff;
    /*box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.4), inset 0 -2px 2px -2px #d8dde6;*/
    border-bottom:1px #d8dde6 solid;
    background-color:#f5f8fa;
    /*border-left: 10px solid green;*/
    height:80px;
    position:relative;
    width:280px;
    
}
li > img.frdImage {
    position: relative;
    margin-top:-25px;
    top:50%;
    float:left;
    margin-left:5px;
    border-radius: 50%;    
    width:50px;
    height:50px;
}
li:hover {
    background-color:#e1e5eb;
    cursor:pointer;
}

li > span.frdName {
    position:absolute;
    top:50%;
    margin-top:-10px;
    float:left;
    margin-left:5px;
   font-family:Verdana;
    font-size:18px;
    text-align:left;
    color:#797f8a;
}
.limit {

    width:100%;
  ...

JavaScript

$(document).ready(function(){
    $('body').click(function(){        
        $('.right-bar').animate({width: 'toggle'}, 200);

        // Set the options for the effect type chosen
        //var options = { direction: 'right' };
        // Set the duration (default: 400 milliseconds)
        //var duration = 700;
        //$('.right-bar').toggle('slide', options, 100);  
    });
});