JSFiddle - React, Tailwind, and code Playground

HTML

<fieldset class="star-rating">
                <legend>Your rating:</legend>
                            <input type="radio" name="rating" value="1" id="rating1" checked/>
                            <label for="rating1"><span>1</span></label>
                            <input type="radio" name="rating" value="2" id="rating2" />
                            <label for="rating2"><span>2</span></label>
                             <input type="radio" name="rating" value="3" id="rating3" />
                            <label for="rating3"><span>3</span></label>
                             <input type="radio" name="rating" value="4" id="rating4" />
                            <label for="rating4"><span>4</span></label>
                             <input type="radio" name="rating" value="5" id="rating5" />
                            <label for="rating5"><span>5</span></label>

            </fieldset>

CSS

.star-rating {
  border: 1px solid #999;
  display: inline-block;
  padding: 0 0.3rem;
}

.star-rating input {
  display: inline-block;
  height: 2rem;
  margin: 0;
  width: 2rem;
  cursor: pointer;
}

.star-rating input::after {
  background-color: #fff;
  color: gold;
  content: "\2605";
  text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
  display: block;
  font-size: 1.5rem;
  height: 2rem;
  line-height: 2rem;
  text-align: center;
  width: 2rem;
}

.star-rating input:checked::after {
  color: gold;
}

.star-rating input:checked ~ input::after,
.star-rating:hover input:hover ~ input::after {
  content: "\2606";
  color: black;
}

.star-rating:hover input::after {
  color: gold;
  content: "\2606"; /* use an open star on hover */
  font-size: 1.5rem;
}

.star-rating label{
  border: 0;
  padding: 0;
  margin: 0;
  position: absolute !important;
  height: 1px; 
  width: 1px;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
  clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
  clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
  white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}