JSFiddle - React, Tailwind, and code Playground

by Igaojsfiddle

HTML

<div class="main">
    <div class="a_demo_three third_button"></div>
    <!--<div class="header"></div>-->
    <div class="chat-window">
        <div class="header-window">
           <span class="name-window">Homer Simpsons</span>
           <span class="close-window">x</span> 
        </div>
        <div class="body-window">
            <ul>
                <li class="conversation">
                    <div class="bubble-list">
                        <div class="bubble clearfix">
                            <img class="say-me" src="http://www.webix.com.br/fotos/imagens/cartoons/puroosso.jpg">
                            <div class="bubble-content">
                                <div class="point"></div>
                                <div class="msgIdent">
                                    <span class="msgName Send">Puro Osso</span>
                                    <span class="msgHour">15:55</span>
                                </div>
                                <p>Que lokura... Nossa cara como você é burro...</p>
                            </div>
                        </div>
                    </div>
                </li>
                    <li class="conversation">
                    <div class="bubble-list">
                       <div class="bubble clearfix">
                            <img class="say-he" src="http://www.franksicons.com/shared/20090315095338789537248.gif">
                            <div class="bubble-content-right">
                                <div class="point-right"></div>
                                <div class="msgIdent">
                                    <span class="msgName Receive">Homer Simpsons</span>
                                    <span class="msgHour">15:55</span>
                                </div>
                                <p>Nossa... você fala de uma meneira burra... que burrice</p>
                            </div>
                        </div>
                    </div>
     ...

CSS

html, body {
    margin:0;
    height: 100%;
    overflow-y: hidden;
}
.main {
    position: relative;
    /*background-image: url('http://subtlepatterns.com/patterns/nami.png'); /*dark_wall.png*/
    */ background-position: initial initial;
    background-repeat: initial initial;
    "
 width:100%;
    height:100%;
}
.header {
    width:100%;
    height:35px;
    background-color:#ff6600;
    box-shadow: 0px 9px 0px #AC5126;
}
.right-bar {
    /*width:35%;*/
    background-color:#f5f8fa;
    float:right;
    margin-top: 12px;
    /* para falta de suporte */
    height: -webkit-calc(100%);
    /* para Chrome */
    height: -moz-calc(100%);
    /* para Firefox */
    height: calc(100%);
    /* para suporte nativo */
    border-left: 1px solid #d8dde6;
}
/* @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:40px;
    position:relative;
    width:220px;
}
li > img.frdImage {
    position: relative;
    margin-top:-16px;
    top:50%;
    float:left;
    margin-left:15px;
    border-radius: 50%;
    /*width:18%;*/
    /*height:60%;*/
    width:32px;
    height:32px;
}
li:hover {
    background-color:#e1e5eb;
...

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);  
    });
});