JSFiddle - React, Tailwind, and code Playground

by Muhammad Aref

HTML

<form>
    <fieldset class="rating">
        <input id="radio1" type="radio" name="radio" value="1"><label for="radio1"></label>
        <input id="radio2" type="radio" name="radio" value="2"><label for="radio2"></label>
        <input id="radio3" type="radio" name="radio" value="3"><label for="radio3"></label>
        <input type="submit" value="Submit">
    </fieldset>
</form>

CSS

@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);

.rating {
    display: inline;
    border: none;
}

.rating > label > input {
    margin: 0px;
}

.rating > label:before {
    margin: 0px;
    font-size: 1em;
    font-family: FontAwesome;
    display: inline-block;
    content: "\f005";
}

.rating > label { 
    color: #ddd;
}

.rating input:checked + label, /* show gold star when clicked */
.rating input:hover + label,
.rating label:hover { color: #FFD700; } /* hover previous stars in list */

.rating:not(:checked) > label:hover { color: #FFD700; } /* hover current star */
.rating:not(:checked) > label:hover ~ label { color: #ddd;  } /* un-hover stars after current star */