JSFiddle - React, Tailwind, and code Playground

by Wagner Souza

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<div class="shouttboxFacebook">    
    <div class="facebookHead"><span>Total de mensagens:</span> 21</div>
    <div class="facebookContent">
        <ul>

            <li>
                <div class="facebookShoutt">
                    <div class="facebookAvatar">
                        <a href="#"><img src="http://r19.imgfast.net/users/1917/43/09/52/avatars/61-53.jpg" alt="Avatar"/></a>
                    </div>
                    <div class="facebookMessage">
                        <div class="facebookClear">

                            <div class="facebookDelete" title="Deletar shoutt"><a href="#"></a></div>

                            <div class="facebookMessageContent">

                                <div class="facebookAutor"><a target="_blank" href="#">Wagner</a></div>
                                    
                                <div class="messageContent">
                                    Teste
                                </div>

                                <div class="facebookShouttHour">Às 10:46 - 23/02/2014</div>

                            </div>
                        </div>
                    </div>
                </div>
            </li>
           
        </ul>
    </div>
    <div class="facebookInput">
        <div class="facebookAvatar" id="myAvatar">
            <a href="#"><img src="http://r19.imgfast.net/users/1917/43/09/52/avatars/61-53.jpg" alt="Avatar"/></a>
        </div>
        <div class="facebookInput">
            <div class="facebookInputClear">
                <div class="inputMessage">
                    <div class="inputClear">
                        <textarea title="Escreva uma mensagem..." maxlenght="200" placeholder="Escreva uma mensagem..."></textarea>
                    </div>
                    <div...

CSS

@charset="utf-8";
body{margin:0;}
*{outline: none;}
.shouttboxFacebook{
	font: 11px 'Lucida grande', tahoma, verdana, arial, sans-serif;
	color: #333;
}
.shouttboxFacebook a{
    color: #3B5998;
    cursor: pointer;
    text-decoration: none;
}
.shouttboxFacebook ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.shouttboxFacebook li, .facebookInput{
	background-color: #EDEFF4;
	overflow: hidden;
	margin: 1px 0 0 0;
	padding: 4px;
	word-wrap: break-word;
}
.facebookHead{
	padding: 5px 10px;
	text-align: right;
	font-size: 10px;
}
.facebookHead span{
	font-weight: bold;
	margin: 0 3px;
}
.facebookAvatar, .facebookAutor, .messageContent, .inputClear{
	float: left;
}
.facebookAvatar img{
	display: block;
	height: 32px;
	width: 32px;
	border: 0 none;
}
.facebookMessage, .facebookInput{
	overflow: hidden;
	padding: 0px 0px 0px 8px;
}
.facebookDelete, .submitMessage{
	float: right;
}
.facebookAutor{
	font-weight: bold;
	margin: 0 5px 0 0;
}
.facebookShouttHour{
	clear: both;
	color: #808080;
}
.facebookContent{
	max-height: 220px;
	overflow: auto;
}
.facebookDelete a{
	display: block;
	width: 15px;
	height: 15px;
	display: none;
	background: url('deleteShoutt.png') no-repeat 0 0;
}
.facebookDelete a:hover{
	text-decoration: underline;
}
.facebookInput{
	padding: 4px 5px 5px 5px;
	position: relative;
}
.inputMessage{
	overflow: hidden;
	background: #fff;
	border: #bdc7d8 1px solid;
}
.inputMessage textarea{
	background-color: transparent;
	border: 0px none;
	-moz-box-sizing: border-box;
	outline: 0px none;
	font: 11px 'Lucida grande', tahoma, verdana, arial, sans-serif;
	width: 100%;
	height: 21px;
	padding: 3px 29px 0 5px; 
	max-width: 100%;
	word-wrap: break-word;
	line-height: 1.28;
	color: #777;
	resize: none;
}
.inputMessage i{
	height: 12px;
	margin: 6px 8px;
	width: 15px;
	cursor: pointer;
	position: absolute;
	top: 5px;
	right: 3px;
}
.inputClear{
	word-wrap: break-word;
	overflow: hidden;
	width: 100%;
}
.facebookInputClear{
	word-wrap:...

JavaScript

$(function () {
    //Efeito dos shoutts
    $(".submitMessage").click(function () {
        var wrapUl = $(".facebookContent ul");
        wrapUl.append('<li class="newShoutt"><div class="facebookShoutt"><div class="facebookAvatar"><a href="#"><img src="http://r19.imgfast.net/users/1917/43/09/52/avatars/61-53.jpg" alt="Avatar"/></a></div><div class="facebookMessage"><div class="facebookClear"><div class="facebookDelete"><a href="#"></a></div><div class="facebookMessageContent"><div class="facebookAutor"><a target="_blank" href="#">Wagner</a></div><div class="messageContent"> Teste </div><div class="facebookShouttHour">Às 10:46 - 23/02/2014</div> </div></div></div> </div></li>');
        $("li.newShoutt:last").slideDown(600, 'easeOutBounce');                                  
        $('.facebookContent ').animate({
            scrollTop: wrapUl.height()
        }, 500);
    });
    //Efeito delete
    $(".facebookContent li").hover(function() {
        $(this).children().find('.facebookDelete a').css('display','block');
    }, function() {
        $(this).children().find('.facebookDelete a').css('display','none');
    });

    $(".facebookContent a").hover(function() {
        $(this).css('background-position','0 -16px');
    }, function() {
        $(this).css('background-position','0 0');    
    });



});