JSFiddle - React, Tailwind, and code Playground

by mackry

HTML

<fieldset class="rating">
    <span>Strongly disagree</span>
    <input type="radio" id="star5" name="rating" value="5" /><label for="star5" title="Rocks!">Strongly disagree</label>
    <input type="radio" id="star4" name="rating" value="4" /><label for="star4" title="Pretty good">Disagree</label>
    <input type="radio" id="star3" name="rating" value="3" /><label for="star3" title="Meh">Neither agree nor disagree</label>
    <input type="radio" id="star2" name="rating" value="2" /><label for="star2" title="Kinda bad">Agree</label>
    <input type="radio" id="star1" name="rating" value="1" /><label for="star1" title="Sucks big time">Strongly agree</label>
    <span>Strongly agree</span>
</fieldset>

CSS

body {
    margin: 100px;
}

.rating {
    position: relative;
}

.rating input {
    margin: 0 2px;
}

.rating input:hover + label {
    display: block;
}

.rating label {
    display: none;
    position: absolute;
}