JSFiddle - React, Tailwind, and code Playground

by Mr_Vasu

HTML

<div class="">
    <div class="ratingVisualWrpper">
        <div class="ratingVisual QualityActive" quality="Poor"><span class="sprt poor"></span>
        </div>
        <div class="ratingVisual" quality="Bad"><span class="sprt bad"></span>
        </div>
        <div class="ratingVisual" quality="Average"><span class="sprt average"></span>
        </div>z
        <div class="ratingVisual" quality="Good"><span class="sprt good"></span>
        </div>
        <div class="ratingVisual" quality="Excellent"><span class="sprt excellent"></span>
        </div>
    </div>
</div>

CSS

.ratingVisualWrpper {
    display:inline-block;
    width:100%;
}
.ratingVisual {
    background:rgba(0, 0, 0, .35);
    width:19%;
    float:left;
    text-align:center;
    border-right:1px solid #1a555c;
    position:relative;
     padding-bottom:10px;
}
.ratingVisual:first-child{
    border-radius:4px 0 0 4px;
}
.ratingVisual:last-child{
    border-radius:0 4px 4px 0;
    border:none;
}
.ratingVisual:hover{
    background:#1a555c;
    color:#fff;
}
.ratingVisual:after {
    content:attr(quality);
    position:absolute;
    bottom:0;
   
    left:0;
    right:0;
}
.ratingVisual span {
    margin:10px 10px 5px 10px;
    height:60px;
    width:59px;
    display:inline-block;
}
.sprt {
    background:url("http://www.memde.de/Bilder/FacesScale.png") no-repeat left top;
}
.poor {
    background-position:-290px 0;
    width: 59px;
    height: 59px;
}
.bad {
    background-position:-218px 0;
    width: 59px;
    height: 59px;
}
.average {
    background-position:-145px 0;
    width: 60px;
    height: 59px;
}
.good {
    background-position:-73px 0;
    width: 59px;
    height: 59px;
}
.excellent {
    background-position:0 0;
    width: 59px;
    height: 59px;
}