JSFiddle - React, Tailwind, and code Playground

by B L Praveen

HTML

<p>Please rate this item:</p>
    <div class="rating">     
        <span  class="label"> Rating: </span>

        <input type="radio" name="stars" id="no_stars" value="" required checked="checked">

        
        <label class="stars" for="0_stars">0 star</label>
        <input type="radio" name="stars" id="0_stars" value="0" required>     
        <label class="stars" for="1_stars">1 star</label>
        <input type="radio" name="stars" id="1_stars" value="1" >
         <label class="stars" for="2_stars">2 stars</label>            
        <input type="radio" name="stars" id="2_stars" value="2" >

        <label class="stars" for="3_stars">3 stars</label>            
        <input type="radio" name="stars" id="3_stars" value="3" >        
        <label class="stars" for="4_stars">4 stars</label>        
        <input type="radio" name="stars" id="4_stars" value="4" >
            
<div>

CSS

.rating {
    width: 300px;
    height: 34px;
    background-color: #f6f3f3;
}
 #no_stars {
 display:none;
 }
.rating label {
    text-indent: -100px;
    width: 40px !important;
    height: 30px;
    overflow: hidden;
    cursor: pointer;
}
 
.label {
    float: left;
    padding-top: 3px;
}
         
input[type="radio"] {
    padding-right: 4px;
    position: absolute;
    left: 340px;
    margin-top: 10px;
}
                 
input[type="radio"], .rating label.stars {
    float: left;
    line-height: 30px;
    height: 30px;
}
 
span + input[type=radio] + label, legend + input[type=radio] + label {
    clear: right;
    counter-reset: checkbox;
}
 
.rating input[type="radio"]:required + label:after {
    content: '';
    position: absolute;
    left: 340px; 
    min-height: 10px;
    margin-top: -36px;
    text-align: right;
    background: #6cbf00;
    padding: 10px 10px;
    display: block;
    width: 50px;
}
 
.rating label.stars {
    background: transparent url('http://www.findsourcecode.com/wp-content/uploads/2014/04/star.png') no-repeat center center;
}
.rating label.stars:hover {
    background: transparent url('http://www.findsourcecode.com/wp-content/uploads/2014/04/star.png') no-repeat center center;
} 
.rating label.stars:hover ~ label.stars, 
.rating input[type=radio][name=stars]:checked ~ label.stars {
    background-image: url('http://www.findsourcecode.com/wp-content/uploads/2014/04/star_off.png');
    counter-increment: checkbox;
}
.rating label.stars:hover ~ label.stars, {
}
}
 
.rating input[type=radio][name=stars]:required + label.stars:after {
    content: counter(checkbox) " stars!";
}