JSFiddle - React, Tailwind, and code Playground

by sandro_paganotti

HTML

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

CSS

input{
    display:none;
}
input:checked ~ label{
    color: orange;
}
label{
    display: inline-block;
    float: right;
    overflow: hidden;
    height: 1em;
    width: 1em;
    line-height: 1em;
}
label:before{
    content: '★';
}
.rating{
    width: 200px;
}