JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div class="box">
    <span class="badge">1,120</span>
    <i class="fa fa-shopping-cart"></i>
    Orders
</div>
<div class="box">
    <span class="badge">15</span>
    <i class="fa fa-gears"></i>
    Your Settings
</div>

CSS

.box {
    background: #19B5FE;
    height: 90px;
    width: 100px;
    margin: 10px;
    text-align: center;
    font-size: 14px;
    color:#fff;
    cursor:pointer;
    display:inline-block;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
}
.box:hover {
    background: #22A7F0;    
}
.badge {
    position: relative;
    top: -8px;
    right: 8px;
    float: right;
    background: #BF55EC;
    font-size: 12px;
    padding: 3px 5px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    Z-INDEX:560;
}
.box i {
    display:block;
    font-size:25px;
    padding: 25px 0 7px;
}