JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li data="3"></li>
    <li data="7"></li>
    <li data="15"></li>
</ul>

CSS

ul{
    width: 250px;
}

li{
    list-style: none;
    float: left;
    margin-right: 8px;
    width: 18px;
    height: 18px;
    background: #9c0;
    position: relative;
}

li:after{
    content:attr(data);
    padding: 1px 2px 2px 3px;
    position: absolute;
    background: red;
    right: -3px;
    top: -5px;
    font-weight: bold;
    text-align: center;
    font-size: 9px;
    border-radius:2px ;
    color: #fff;
}

li:nth-child(1){
    background: #fff url(https://dl.dropboxusercontent.com/u/77028632/sarhov.com/fb.png) 0 0 no-repeat;
}


li:nth-child(2){
    background: #fff url(https://dl.dropboxusercontent.com/u/77028632/sarhov.com/fb.png) 0 -58px no-repeat;
}

li:nth-child(3){
    background: #fff url(https://dl.dropboxusercontent.com/u/77028632/sarhov.com/fb.png) 0 -29px no-repeat;
}