JSFiddle - React, Tailwind, and code Playground

by J. Albert Bowden

HTML

<div class="rating">
            <span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span>
        </div>

<hr />
<hr />
<p><cite><a href="http://css-tricks.com/examples/StarRating/" title="Star Rating">Star Rating</a></cite></p>

CSS

.rating {
          unicode-bidi: bidi-override;
          direction: rtl;
          text-align: center;
        }
        .rating > span {
          display: inline-block;
          position: relative;
          width: 1.1em;
        }
        .rating > span:hover,
        .rating > span:hover ~ span {
          color: transparent;
        }
        .rating > span:hover:before,
        .rating > span:hover ~ span:before {
           content: "\2605";
           position: absolute;
           left: 0;
           color: gold;
        }