JSFiddle - React, Tailwind, and code Playground

HTML

<form class="stars-rating"  method="post" target="invisible-iframe-or-something-AJAX-like">
   <p>
       <b>Текущий рейтинг: </b>
       <span class="rating">3</span>
       * (из
       <span class="fallback">
           <span>*</span>
           <span>*</span>
           <span>*</span>
           <span>*</span>
           <span>*</span>
       </span>)
   </p>
   <p>
       Ваша оценка:
       <input type="submit" name="rate" value="1*" title="*">    
       <input type="submit" name="rate" value="2*" title="**">
       <input type="submit" name="rate" value="3*" title="***">
       <input type="submit" name="rate" value="4*" title="****">
       <input type="submit" name="rate" value="5*" title="*****">
   </p>
</form>

CSS

.stars-rating b, .stars-rating .rating, .stars-rating  input {
    height: 17px;
    background:  url(http://sticker-book.com/images/star-rating-sprite.png) repeat-x;
}

.stars-rating {
    height: 17px;
    width: 80px;
    position: relative;
}

.stars-rating * {
    position: absolute;
    top: 0;
    left: 0;
    text-indent: -9999in;
}

.stars-rating b, .stars-rating p {
    width: 80px;
}

.stars-rating b {
    background-position: 0 -17px;
}

.stars-rating .rating {
    width: 48px;
    background-position: 0 2px;
}

.stars-rating:hover .rating {
    background-position: 0 -17px;
}

.stars-rating input {
    border: 0  none;
    background-position: 0 100px;
    width: 16px;
    z-index: 5;
    cursor: pointer;
    font-size: 0;
    color: #fff;
}

.stars-rating  input+input {
    width: 32px;
    z-index: 4;
}

.stars-rating input+input+input {
    width: 48px;
    z-index: 3;
}

.stars-rating input+input+input+input {
    width: 64px;
    z-index: 2;
}

.stars-rating  input+input+input+input+input {
    width: 80px;
    z-index: 1;
}

.stars-rating  input:hover {
    background-position: 0 -35px; 
}

/* при отключенной графике покажем просто текстовые значения  */
.stars-rating .fallback {
    z-index: -1;
    width: 80px;
    background: none;
}

.stars-rating .fallback span {
    text-indent:  0;
    float: left;
    position: static;
    width: 16px;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    color: #888;
}