JSFiddle - React, Tailwind, and code Playground

by Igaojsfiddle

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<input type="button" class='btn btn-warning'  id="MandaBala" value="MANDA BALA!"></input>
<div id="divNotificacoes">&nbsp;</div>

CSS

#divNotificacoes{
    width: 200px;
    height: 100%;
    position: absolute;
    overflow: hidden;
    
}

.divNotificacao{
    width: 190px;
    
    margin-bottom:20px;
    margin: auto;
    margin-top: 5px;
    display: none;
    background-color:rgba(0, 0, 0, 0.60);
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-topleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    color:white;
    font-family:Verdana;
    font-size:12px;    
    padding-left:5px;
}
.icoInformacao {
	background: url('http://glyphicons.com/wp-content/themes/glyphicons/images/glyphicons.png') no-repeat -241px -912px;
background-image: gradient(red);
	width: 26px;
	height: 27px;
    float: left;
    padding: 5px;
    margin-top: 10px;
    margin-left: 10px;
}
.textoInformacao{
    padding-top:10px;
}

JavaScript

$(function () {

    $("#MandaBala").click(function(){
    
        $("#divNotificacoes").prepend(
            "<div class='divNotificacao'>" +
                "<div class='icoInformacao'></div>" +
                "<div class='textoInformacao'>Fulano comentou em seu Review!" +
            "<div class='progress progress-striped active' style='height:7px; margin-left:10%; margin-bottom: 0px; margin-top:2%; width:80%; position:relative;'>" +
            "<div class='bar' id='bar' style='width: 0%;'></div>" +
                "</div>" +
            "</div>" +
            "&nbsp;" +
            "</div>"
        );
        
        var vDiv = $("#divNotificacoes div").first("div");
        var opa = $("#bar");
        setInterval(function(){updateProgress(opa);} ,100);
        
        vDiv.effect("bounce", { mode: 'show' }, 2000);
        setTimeout(function(){RemoverNotificacao(vDiv);} ,10000);
        
        vDiv.click(function(){RemoverNotificacao(vDiv);});
          
    });
  
});

function RemoverNotificacao(vDiv)
{
    vDiv.effect("bounce", { mode: 'hide', direction: 'left', times: 1 }, 500);
    setTimeout(function(){vDiv.remove();} ,1000);
} 
function updateProgress(pgrss)
{
    var wd = $(pgrss).width();
    $(pgrss).width(wd+7.5);
}