JSFiddle - React, Tailwind, and code Playground

by jackwanders

HTML

<section class="rating-widget">
  <div class="current-rating" style="width: 72%"></div>
  <i></i><i></i><i></i><i></i><i></i>
</section>

CSS

.rating-widget, .rating-widget > * {
  height: 26px;
}
.rating-widget {
  position: relative;
  width: calc(26px * 5);
  background: url(http://sandbox.bumbu.ru/ui/external/stars.png) 0 0 repeat-x;
}
.rating-widget .current-rating {
  background: url(http://sandbox.bumbu.ru/ui/external/stars.png) 0 -26px repeat-x;
}
.rating-widget i {
  display: block;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  background: url(http://sandbox.bumbu.ru/ui/external/stars.png) 0 -52px repeat-x;
}
.rating-widget:hover .current-rating {
  display: none;
}
.rating-widget i:hover {
  opacity: 1;
  cursor: pointer;
}
.rating-widget i:nth-of-type(1) { width: calc(26px * 5); }
.rating-widget i:nth-of-type(2) { width: calc(26px * 4); }
.rating-widget i:nth-of-type(3) { width: calc(26px * 3); }
.rating-widget i:nth-of-type(4) { width: calc(26px * 2); }
.rating-widget i:nth-of-type(5) { width: calc(26px * 1); }