JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<ul class="rateinfo">
<li><span class="r">5</span><span class="bar"><span style="width: 81%; "></span></span><span class="num">21</span><div class="clear"></div></li>
<li><span class="r">4</span><span class="bar"><span style="width: 15%; "></span></span><span class="num">4</span><div class="clear"></div></li>
<li><span class="r">3</span><span class="bar"><span style="width: 4%; "></span></span><span class="num">1</span><div class="clear"></div></li>
<li><span class="r">2</span><span class="bar"><span style="width: 0%; "></span></span><span class="num">0</span><div class="clear"></div></li>
<li><span class="r">1</span><span class="bar"><span style="width: 0%; "></span></span><span class="num">0</span><div class="clear"></div></li>
</ul>

CSS

.rateinfo {
    padding: 0 10px;
}
.rateinfo li {
    display: block;
}
.rateinfo span {
    float: left;
    font-size: 10px;
    line-height: 10px;
    padding-right: 4px;
    color: #666;
    margin: 2px 0;
}
.rateinfo .bar {
    width: 70px;
    height: 8px;
    background-color: #e9e9e9;
    background-color: rgba(0,0,0,0.1);
    margin: 1px;
    padding: 0;
    overflow: hidden;
}
.rateinfo .bar span {
    background-color: #555;
    height: 8px;
    margin: 0;
    padding: 0;
}
.rateinfo .num,
.rateinfo .r {
    font-weight: bold;
    padding: 0 5px;
    margin: 0;
    font-family: Helvetica,Arial,sans-serif;
}
.rateinfo .r {
    color: #ccc
}