JSFiddle - React, Tailwind, and code Playground

HTML

Пожалуйста, оцените вот такой рейтинг:
<form class="stars-rating"  method="post" target="invisible-iframe-or-something-AJAX-like">
   <button type="submit" name="rate" value="1" title="1*">1</button>
   <button type="submit" name="rate" value="2" title="2*">2</button>
   <button type="submit" name="rate" value="3" title="3*" class="rating">3</button>
   <button type="submit" name="rate" value="4" title="4*">4</button>
   <button type="submit" name="rate" value="5" title="5*">5</button>
</form>

CSS

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

.stars-rating {
    width: 80px;
    position: relative;
    display: inline-block;
    vaertical-align: bottom;
}

.stars-rating button {
    position: absolute;
    top: 0;
    left: 0;
    border: 0  none;
    width: 16px;
    z-index: 6;
    padding: 0;
    text-align: right;
    cursor: pointer;
}

.stars-rating button, .stars-rating:hover .rating {
    background-position: 0 100px;
}

.stars-rating button:before{
    content: url(http://sticker-book.com/images/star-rating-sprite.png);
    display:block;
    visibility: hidden;
}

.stars-rating  button + button {
    width: 32px;
    z-index: 5;
}

.stars-rating button + button + button {
    width: 48px;
    z-index: 4;
}

.stars-rating button + button + button + button {
    width: 64px;
    z-index: 3;
}

.stars-rating  button + button + button + button + button {
    width: 80px;
    z-index: 2;
}

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

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

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