JSFiddle - React, Tailwind, and code Playground

by Alexander

HTML

<div class='rating'>
  <div class='star empty'></div>
  <div class='star empty'></div>
  <div class='star empty'></div>
  <div class='star empty'></div>
  <div class='star empty'></div>
</div>
<div class='rating'>
  <div class='star'></div>
  <div class='star empty'></div>
  <div class='star empty'></div>
  <div class='star empty'></div>
  <div class='star empty'></div>
</div>
<div class='rating'>
  <div class='star'></div>
  <div class='star'></div>
  <div class='star empty'></div>
  <div class='star empty'></div>
  <div class='star empty'></div>
</div>
<div class='rating'>
  <div class='star'></div>
  <div class='star'></div>
  <div class='star'></div>
  <div class='star empty'></div>
  <div class='star empty'></div>
</div>
<div class='rating'>
  <div class='star'></div>
  <div class='star'></div>
  <div class='star'></div>
  <div class='star'></div>
  <div class='star empty'></div>
</div>
<div class='rating'>
  <div class='star'></div>
  <div class='star'></div>
  <div class='star'></div>
  <div class='star'></div>
  <div class='star'></div>
</div>

CSS

.rating {
  font-size: 2.5em;
  padding: 5px;
}

.star {
  display: inline-block;
  color: gold;
  vertical-align: top;
}

.star:after {
  content: "\2605";
}

.empty:after {
  content: "\2606";
}