JSFiddle - React, Tailwind, and code Playground

HTML

<div class="rating-stars-wrapper">
    <input type="radio" name="rating-stars" value="5" id="id-5">
    <label for="id-5"></label>

    <input type="radio" name="rating-stars" value="4" id="id-4" checked>
    <label for="id-4"></label>

    <input type="radio" name="rating-stars" value="3" id="id-3">
    <label for="id-3"></label>

    <input type="radio" name="rating-stars" value="2" id="id-2">
    <label for="id-2"></label>

    <input type="radio" name="rating-stars" value="1" id="id-1">
    <label for="id-1"></label>
</div>

CSS

.rating-stars-wrapper {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  width: fit-content;
}

input[type="radio"] {
  display: none;
}

label {
  cursor: pointer;
  font-size: 40px;
  color: red;
}

label:before {
  content: '\2606';
  position: relative;
}

input[type="radio"]:checked ~ label:before {
  content: '\2605';
  opacity: 0.7;
}

.rating-stars-wrapper label:hover:before,
.rating-stars-wrapper label:hover ~ label:before {
  content: '\2605';
  opacity: 0.7;
}

.rating-stars-wrapper:not(:hover) input[type="radio"]:checked ~ label:before,
.rating-stars-wrapper:hover input[type="radio"]:hover ~ label:before {
  opacity: 1;
}

JavaScript

// NO JS