JSFiddle - React, Tailwind, and code Playground

HTML

<p>Наведи:</p>
<div class="rating">
  <div class="rating__el" data-rating="1"></div>
  <div class="rating__el" data-rating="2"></div>
  <div class="rating__el" data-rating="3"></div>
  <div class="rating__el" data-rating="4"></div>
  <div class="rating__el" data-rating="5"></div>
  <div class="rating__el" data-rating="6"></div>
  <div class="rating__el" data-rating="7"></div>
  <div class="rating__el" data-rating="8"></div>
  <div class="rating__el" data-rating="9"></div>
  <div class="rating__el" data-rating="10"></div>
</div>

<br>
<br>
<p>Неизменяемый рейтинг:</p>
<div class="rating rating--unchangeable">
  <div class="rating__el" data-rating="1"></div>
  <div class="rating__el" data-rating="2"></div>
  <div class="rating__el" data-rating="3"></div>
  <div class="rating__el" data-rating="4"></div>
  <div class="rating__el" data-rating="5"></div>
  <div class="rating__el" data-rating="6"></div>
  <div class="rating__el rating__el--active" data-rating="7"></div>
  <div class="rating__el" data-rating="8"></div>
  <div class="rating__el" data-rating="9"></div>
  <div class="rating__el" data-rating="10"></div>
</div>


<br>
<br>
<p>Изменяемый по клику рейтинг:</p>
<div class="rating rating--set">
  <div class="rating__el" data-rating="1"></div>
  <div class="rating__el" data-rating="2"></div>
  <div class="rating__el" data-rating="3"></div>
  <div class="rating__el" data-rating="4"></div>
  <div class="rating__el rating__el--active" data-rating="5"></div>
  <div class="rating__el" data-rating="6"></div>
  <div class="rating__el" data-rating="7"></div>
  <div class="rating__el" data-rating="8"></div>
  <div class="rating__el" data-rating="9"></div>
  <div class="rating__el" data-rating="10"></div>
</div>

CSS

*, :before, :after {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
}

p {
  margin-bottom: .5em;
}

.rating {
  position: relative;
  display: flex;
  max-width: 300px;
  background-color: #eee;
  border-radius: 4px;
  overflow: hidden;
  color: #fff;
  font-size: 10px;
  cursor: pointer;
}

.rating__el {
  position: relative;
  flex: 0 0 30px;
  max-width: 30px;
  height: 30px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ddd;
  transition: background-color .2s;
}

.rating__el:before {
  content: '';
  position: absolute;
  top: 0;
  right: 100%;
  width: 1000%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
  transition-delay .2s;
}

.rating__el:after {
  content: '★' attr(data-rating);
  display: block;
  width: 100%;
  text-align: center;
  line-height: 1;
  margin-top: -10px;
  opacity: 0;
  transition: opacity .2s, margin .2s;
  letter-spacing: .05em;
}

.rating__el:hover,
.rating__el--active {
  background-color: #333;
}

.rating__el:hover:before,
.rating__el--active:before {
  opacity: 1;
}

.rating__el:hover:after,
.rating__el--active:after{
  opacity: 1;
  margin-top: 0;
}

.rating__el:nth-child(1):before {
  background: linear-gradient(to bottom, #ff2f00, #f00);
}

.rating__el:nth-child(2):before {
  background: linear-gradient(to bottom, #ff6200, #ff3200);
}

.rating__el:nth-child(3):before {
  background: linear-gradient(to bottom, #ff9300, #ff6500);
}

.rating__el:nth-child(4):before {
  background: linear-gradient(to bottom, #ffb600, #ff9500);
}

.rating__el:nth-child(5):before {
  background: linear-gradient(to bottom, #ffd100, #ffb700);
}

.rating__el:nth-child(6):before {
  background: linear-gradient(to bottom, #ffec00, #ffd200);
}

.rating__el:nth-child(7):before {
  background: linear-gradient(to bottom, #e6f200, #ffed00);
}

.rating__el:nth-child(8):before {
  background: linear-gradient(to bottom, #9acc00,...