JSFiddle - React, Tailwind, and code Playground

by josekerekes

HTML

<form>
     <input type="radio" name="rating" id="star5" />
      <label for="star5">5</label>
     <input type="radio" name="rating" id="star4" />
      <label for="star4">4</label>
      <input type="radio" name="rating" id="star3" />
      <label for="star3">3</label>
      <input type="radio" name="rating" id="star2" />
      <label for="star2">2</label>
      <input type="radio" name="rating" id="star1" />
      <label for="star1">1</label>
</form>

CSS

form {width:245px}
label {background:url(http://thecsscoder.com/blog/blog-images/star-sprite.png);display:inline-block;width:49px;height:34px}
input {display:none}
label, input {float:right;text-indent:-9999px}
input:checked ~ label  {color:red}