JSFiddle - React, Tailwind, and code Playground

by Svetlana

HTML

<div class="star-vote-container">
  <input type="radio" class="star" name="star" id="star1" value="5" />
  <label for="star1" class="star-label">&starf;</label>
  <input type="radio" class="star" name="star" id="star2" value="4" />
  <label for="star2" class="star-label">&starf;</label>
  <input type="radio" class="star" name="star" id="star3" value="3" />
  <label for="star3" class="star-label">&starf;</label>
  <input type="radio" class="star" name="star" id="star4" value="2" />
  <label for="star4" class="star-label">&starf;</label>
  <input type="radio" class="star" name="star" id="star5" value="1" />
  <label for="star5" class="star-label">&starf;</label>
</div>

CSS

.star-vote-container {
  font-size: 0;
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.star-label {
  font-size: 25px;
  cursor: pointer;
  color: #999;
  transition: color 200ms ease;
}

.star {
  position:absolute;
  opacity: 0;
}

.star-label:hover,
.star-label:hover ~ .star-label{
  color: #ff9c00;
}

.star:checked ~ .star-label {
  color: #ff7701;
}