JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<h1>Рейтинг из radio-кнопок</h1>
<fieldset class="rate">
    <input type="radio" id="rating10" name="rating" value="10" /><label for="rating10" title="5 звёзд"></label>
    <input type="radio" id="rating9" name="rating" value="9" /><label class="half" for="rating9" title="4 1/2 звезды"></label>
    <input type="radio" id="rating8" name="rating" value="8" /><label for="rating8" title="4 звезды"></label>
    <input type="radio" id="rating7" name="rating" value="7" /><label class="half" for="rating7" title="3 1/2 звезды"></label>
    <input type="radio" id="rating6" name="rating" value="6" /><label for="rating6" title="3 звезды"></label>
    <input type="radio" id="rating5" name="rating" value="5" /><label class="half" for="rating5" title="2 1/2 звезды"></label>
    <input type="radio" id="rating4" name="rating" value="4" /><label for="rating4" title="2 звезды"></label>
    <input type="radio" id="rating3" name="rating" value="3" /><label class="half" for="rating3" title="1 1/2 звезды"></label>
    <input type="radio" id="rating2" name="rating" value="2" /><label for="rating2" title="1 звезда"></label>
    <input type="radio" id="rating1" name="rating" value="1" /><label class="half" for="rating1" title="1/2 звезды"></label>
</fieldset>

CSS

/* Контейнер для звёзд */
.rate {
    display: inline-block;
    border: 0;
    color: #dadada;
}
/* Прячем стандартные radio-кнопки */
.rate > input {
    display: none;
}
/* Звёзды обязательно должны обтекать элементы справа, иначе магии c половинками не получится. Точнее получится, но справа налево. */
.rate > label {
    float: right;
}
/* Отображаем звёзды в label-элементах. По клику на них свойство checked выставляется нужной radio-кнопке автоматически */
.rate > label:before {
    display: inline-block;
    font-size: 2rem;
    padding: .3rem .2rem;
    margin: 0;
    cursor: pointer;
    font-family: FontAwesome;
    content: "\f005 "; /* Это уже знакомя звезда в Font Awesome */
}

/* Добавляем половинки. Никто не будет оценивать с точностью до второго знака после запятой, а вот половинки не помешают */
.rate .half:before {
    content: "\f089 "; /* А это половинка звезды в Font Awesome */
    position: absolute;
    padding-right: 0;
}

/* Красим звёзды по клику и наведению */
input:checked ~ label, /* красим выделенную звезду и все предыдущие */
label:hover, 
label:hover ~ label { color: orange;  } /* красим предыдущие звёзды по наведению */

/* Красим звёзды в красный, если уже есть выбранная, но мы хотим переголосовать */
input:checked + label:hover, 
input:checked ~ label:hover, 
input:checked ~ label:hover ~ label,
label:hover ~ input:checked ~ label  { color: red;  }