JSFiddle - React, Tailwind, and code Playground

by mindplay

HTML

<div class="stars">
    <input id="star-5" type="radio" name="star"/>
    <label for="star-5"></label>
    <input id="star-4" type="radio" name="star"/>
    <label for="star-4"></label>
    <input id="star-3" type="radio" name="star"/>
    <label for="star-3"></label>
    <input id="star-2" type="radio" name="star"/>
    <label for="star-2"></label>
    <input id="star-1" type="radio" name="star"/>
    <label for="star-1"></label>
</div>

CSS

.stars {
    display: inline-block;
}

.stars input {
    display: none;
}

.stars label {
    float: right;
    padding: 2px;
    font-size: 24px;
    color: #444;
    transition: all .2s;
}

.stars label:before {
    content: '\2605';
}

.stars input:checked ~ label:before {
    color: gold;
    transition: all .25s;
}

.stars label:hover {
    transform: scale(1.3);
}