JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<input type="radio" id="star1" name="stars" class="star-check">
<input type="radio" id="star2" name="stars" class="star-check">
<input type="radio" id="star3" name="stars" class="star-check">
<input type="radio" id="star4" name="stars" class="star-check">
<input type="radio" id="star5" name="stars" class="star-check">
<div class="m">
  <label for="star1" class="str"></label>
  <label for="star2" class="str"></label>
  <label for="star3" class="str"></label>
  <label for="star4" class="str"></label>
  <label for="star5" class="str"></label>
</div>

CSS

.star-check{
 display: none;
}
.str{
  display: inline-block;
  width: 15px;
  height: 15px;
  background:url(http://cyberstatic.net/images/statusicon/user_offline.png)
}
#star1:checked ~ .m :nth-child(1),
#star2:checked ~ .m :nth-child(-n+2),
#star3:checked ~ .m :nth-child(-n+3),
#star4:checked ~ .m :nth-child(-n+4),
#star5:checked ~ .m :nth-child(-n+5){
  background:url(http://cyberstatic.net/images/statusicon/user_online.png)
}