JSFiddle - React, Tailwind, and code Playground

by Alexander

HTML

<div id="body">

    <div class="b-rating_star s-v25"><div></div></div>

</div>

CSS

#body {
    margin: 40px;
}

.b-rating_star {
    margin: 0 auto;
    padding: 0;
    display: inline-block;
    background: url(http://cdn.majorov.su/img/star/icon/32/star_empty.gif) repeat-x top left;
    height: 32px;
    width: 160px;
}

.b-rating_star > div {
    background: url(http://cdn.majorov.su/img/star/icon/32/star.gif) repeat-x top left;
    height: 32px;
    width:0px;
}

.b-rating_star.s-v0 > div {
    width: 0px;
}

.b-rating_star.s-v05 > div {
    width: 16px
}

.b-rating_star.s-v10 > div {
    width: 32px
}

.b-rating_star.s-v15 > div {
    width: 48px
}

.b-rating_star.s-v2 > div {
    width: 64px
}

.b-rating_star.s-v25 > div {
    width: 80px
}

.b-rating_star.s-v3 > div {
    width: 96px
}

.b-rating_star.s-v35 > div {
    width: 112px
}

.b-rating_star.s-v4 > div {
    width: 128px
}

.b-rating_star.s-v45 > div {
    width: 144px
}

.b-rating_star.s-v5 > div {
	width: 160px
}