JSFiddle - React, Tailwind, and code Playground

by Znuff

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="votes"> <span class="vote vote-up"><i class="fa fa-thumbs-o-up"></i>5</span>
 <span class="vote vote-down"><i class="fa fa-thumbs-o-down"></i>5</span>

</div>
<div class="votes"> <span class="vote vote-up vote-check"><i class="fa fa-check "></i>1</span>
 <span class="vote vote-down vote-disabled"><i class="fa fa-thumbs-o-down fa-disabled"></i>5</span>

</div>
<div class="votes"> <span class="vote vote-up vote-disabled"><i class="fa fa-thumbs-o-up fa-disabled"></i>5</span>
 <span class="vote vote-down vote-check"><i class="fa fa-check"></i>1</span>

</div>

CSS

.votes .vote {
    border-radius: 3px;
    color: #fff;
    margin-top: 12px;
    border-radius: 3px;
    color: #fff;
    padding: 3px 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), 1px 1px 1px rgba(225, 225, 225, 0.3) inset;
    text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.1);
}
.votes span {
    display: inline-block;
}
.votes i {
    width: 1em;
}
.votes .vote-up {
    background: #00A000;
}
.votes .vote-down {
    background: #c80000;
}
.votes .vote-check {
    background: #164c90;
}
.votes .vote-disabled {
    background: #CCC;
}