JSFiddle - React, Tailwind, and code Playground

HTML

<div class="star-rating">
  <input type="radio" id="5" name="star" value="5" data-star />
  <label for="5"></label>
  <input type="radio" id="4" name="star" value="4" data-star />
  <label for="4"></label>
  <input type="radio" id="3" name="star" value="3" data-star />
  <label for="3"></label>
  <input type="radio" id="2" name="star" value="2" data-star />
  <label for="2"></label>
  <input type="radio" id="1" name="star" value="1" data-star />
  <label for="1"></label>
</div>

CSS

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css);

.star-rating > input {
  display: none;
}

.star-rating {
  float: left;
}

.star-rating > label:before {
  font-family: FontAwesome;
  content: "\f005";
  display: inline-block;
}

.star-rating > label {
  color: #CCC;
  float: right;
}

.star-rating > input:checked ~ label,
.star-rating:not(:checked) > label:hover ~ label,
.star-rating > label:hover{
  color: gold;
}