JSFiddle - React, Tailwind, and code Playground

by beatrizxe

CSS

.itemRatingForm .formLogLoading {
    height: 25px;
    padding: 0 0 0 20px;
}
.itemRatingList,
.itemRatingList a:hover,
.itemRatingList .itemCurrentRating { background: url('../images/k2/star.png') left -1000px repeat-x; }
.itemRatingList {
    position: relative;
    float: left;
    width: 125px;
    height: 25px;
    overflow: hidden;
    list-style: none;
    margin: 0 6px !important;
    padding: 0;
    background-position: left top;
}
.itemRatingList li {
    display: inline;
    background: none;
    padding: 0;
    border: none !important;
}
.itemRatingList a,
.itemRatingList .itemCurrentRating {
    position: absolute;
    top: 0;
    left: 0;
    text-indent: -1000px;
    height: 25px;
    line-height: 25px;
    outline: none;
    overflow: hidden;
    border: none;
    cursor: pointer;}

.itemRatingList a:hover { background-position: left center;}
.itemRatingList a.one-star {width: 10%;z-index: 10;}
.itemRatingList a.two-stars {width: 20%;z-index: 9;}
.itemRatingList a.three-stars {width: 30%;z-index: 8;}
.itemRatingList a.four-stars {width: 40%;z-index: 7;}
.itemRatingList a.five-stars {width: 50%;z-index: 6;}
.itemRatingList a.six-star {width: 60%;z-index: 5;}
.itemRatingList a.seven-stars {width: 70%;z-index: 4;}
.itemRatingList a.eight-stars {width: 80%;z-index: 3;}
.itemRatingList a.nine-stars {width: 90%;z-index: 2;}
.itemRatingList a.ten-stars {width: 100%;z-index: 1;}
.itemRatingList .itemCurrentRating { z-index: 0; background-position: 0 bottom;margin: 0;padding: 0;}