JSFiddle - React, Tailwind, and code Playground

by rahilsondhi

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.0.2/css/font-awesome.min.css">
<script src="http://ricostacruz.com/jquery.transit/jquery.transit.min.js"></script>
<ul>
    <li class="notification-container">
        <i class="icon-globe"></i>
        <span class="notification-counter">1</span>
    </li>
</ul>



<!-- For demo purposes only -->
<div class="fake-notification">
    <button>Generate a fake notification</button>
</div>

SCSS

.notification-container {
    position: relative;
    width: 16px;
    height: 16px;
    top: 15px;
    left: 15px;
    
    i {
        color: #fff;
    }
}

.notification-counter {   
    position: absolute;
    top: -2px;
    left: 12px;
    
    background-color: rgba(212, 19, 13, 1);
    color: #fff;
    border-radius: 3px;
    padding: 1px 3px;
    font: 8px Verdana;
}



// For demo purposes only
body {
    font-family: Arial;
}

ul {
    background: #000;
    width: 100%;
    height: 50px;
}

ul, li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fake-notification {
    font: 10px Arial;
    margin-top: 50px;
}

CoffeeScript

$('button').click ->
    # Increment the value
    $counter = $('.notification-counter')
    val = parseInt $counter.text()
    val++
    
    # Animation
    $counter
    .css({opacity: 0})
    .text(val)
    .css({top: '-10px'})
    .transition({top: '-2px', opacity: 1})