JSFiddle - React, Tailwind, and code Playground

HTML

<fieldset class="rating one">
<input type="radio" id="star5" name="rating" value="5" /><label for="star5" title="Rocks!"><span>&#9733</span></label>
<input type="radio" id="star4" name="rating" value="4" /><label for="star4" title="Pretty good"><span>&#9733</span></label>
<input type="radio" id="star3" name="rating" value="3" /><label for="star3" title="Meh"><span>&#9733</span></label>
<input type="radio" id="star2" name="rating" value="2" /><label for="star2" title="Kinda bad"><span>&#9733</span></label>
<input type="radio" id="star1" name="rating" value="1" /><label for="star1" title="Sucks big time"><span>&#9733</span></label>
    </fieldset>

    <fieldset class="rating two">
<input type="radio" id="star5-1" name="rating" value="5" /><label for="star5-1" title="Rocks!"><span>&#9733</span></label>
<input type="radio" id="star4-1" name="rating" value="4" /><label for="star4-1" title="Pretty good"><span>&#9733</span></label>
<input type="radio" id="star3-1" name="rating" value="3" /><label for="star3-1" title="Meh"><span>&#9733</span></label>
<input type="radio" id="star2-1" name="rating" value="2" /><label for="star2-1" title="Kinda bad"><span>&#9733</span></label>
<input type="radio" id="star1-1" name="rating" value="1" /><label for="star1-1" title="Sucks big time"><span>&#9733</span></label>
    </fieldset>

CSS

.rating {
  float:left;
}

.rating:not(:checked) > input {
  position:absolute;
  top:-9999px;
  clip:rect(0,0,0,0);
}

.rating:not(:checked) > label {
  float:right;
  width:1em;
  padding:0 .1em;
  overflow:hidden;
  white-space:nowrap;
  cursor:pointer;
  font-size:200%;
  line-height:1.2;
  color:#ddd;
  
}

.rating:not(:checked) > label:before {
  content: &#9733;
}

.rating > input:checked ~ label {
  color: #ff7700;
  text-shadow:1px 1px #c60, 2px 2px #940, .1em .1em .2em rgba(0,0,0,.5);
}

.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
  color: gold;
  text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5);
}

.rating> input:checked + label:hover,
.rating> input:checked + label:hover ~ label,
.rating> input:checked ~ label:hover,
.rating> input:checked ~ label:hover ~ label,
.rating> label:hover ~ input:checked ~ label {
  color: #ea0;
  
}

.rating > label:active {
  position:relative;
  top:2px;
  left:2px;
}