JSFiddle - React, Tailwind, and code Playground

by Nicolas PUJOL

HTML

<div class="rating">
  <span class="rating-star rating-star-1 rating-level-1">&#9733;</span>
  <span class="rating-star rating-star-2 rating-level-1">&#9733;</span>
  <span class="rating-star rating-star-3 rating-level-1">&#9733;</span>
  <span class="rating-star rating-star-4 rating-level-1">&#9733;</span>
  <span class="rating-star rating-star-5 rating-level-1">&#9733;</span>
</div>

CSS

.rating {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  display: inline-block;
}
.rating-star {
  display: none;
}
.rating-star-1.rating-level-5,
.rating-star-2.rating-level-5,
.rating-star-3.rating-level-5,
.rating-star-4.rating-level-5,
.rating-star-5.rating-level-5,

.rating-star-2.rating-level-4,
.rating-star-3.rating-level-4,
.rating-star-4.rating-level-4,
.rating-star-5.rating-level-4,

.rating-star-3.rating-level-3,
.rating-star-4.rating-level-3,
.rating-star-5.rating-level-3,

.rating-star-4.rating-level-2,
.rating-star-5.rating-level-2,

.rating-star-5.rating-level-1 {
  display: inline-block;
}