JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <input type="radio" value="1" name="vote" id="v5">
    <label for="v5">five</label>
    <input type="radio" value="1" name="vote" id="v4">
    <label for="v4">four</label>
    <input type="radio" value="1" name="vote" id="v3">
    <label for="v3">three</label>
    <input type="radio" value="1" name="vote" id="v2">
    <label for="v2">two</label>
    <input type="radio" value="1" name="vote" id="v1">
    <label for="v1">one</label>
</div>

CSS

/*★*/

div{
    float: left;
}

label,input{
    display: block;
    float: right;
}

input{
    display:none;
}

input:checked ~ label{
    color: green;
}

input ~ label:hover, label:hover ~ label{
    color: yellow;
}

label{
    width: 1em;
    overflow: hidden;
}

label:before{
    content: "★";
}