JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="rating">
<li>
<span class="ratingSelector">
<input type="radio" name="ratings[1]" id="Degelijkheid-1-5" value="1" class="radio">
<label class="full" for="Degelijkheid-1-5"></label>
<input type="radio" name="ratings[1]" id="Degelijkheid-2-5" value="2" class="radio">
<label class="full" for="Degelijkheid-2-5"></label>
<input type="radio" name="ratings[1]" id="Degelijkheid-3-5" value="3" class="radio">
<label class="full" for="Degelijkheid-3-5"></label>
<input type="radio" name="ratings[1]" id="Degelijkheid-4-5" value="4" class="radio">
<label class="full" for="Degelijkheid-4-5"></label>
<input type="radio" name="ratings[1]" id="Degelijkheid-5-5" value="5" class="radio">
<label class="full" for="Degelijkheid-5-5"></label>
</span>
</li>
</ul>

CSS

.rating input { display: none; } 
.rating label:before { 
  margin: 5px;
  font-size: 1.25em;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005";
}

li {list-style:none; }

.rating label { 
  color: #ddd;
}

/***** CSS to Highlight Stars on Hover *****/

.rating input:checked ~ label, /* show gold star when clicked */
.rating:not(:checked) label:hover, /* hover current star */
.rating:not(:checked) label:hover ~ label { color: #FFD700;  } /* hover previous stars in list */

.rating input:checked + label:hover, /* hover current star when changing rating */
.rating input:checked ~ label:hover,
.rating label:hover ~ input:checked ~ label, /* lighten current selection */
.rating input:checked ~ label:hover ~ label { color: #FFED85;  }