JSFiddle - React, Tailwind, and code Playground

by R K

HTML

<div class="rating">
        <span>&#9734;</span>
        <span>&#9734;</span>
        <span>&#9734;</span>
        <span>&#9734;</span>
        <span>&#9734;</span>
    </div>

CSS

.rating{
            unicode-bidi: bidi-override;
            direction: rtl;
            clear: both;
            display: block;
            position: relative;
            text-align: center;
            width: 100px;
            margin: 0 auto;
        }
        .rating > span {
            display: inline-block;
            position: relative;
            margin: 0;
            float: right;
            width: 15px;
            padding-right: 5px;
        }
         .rating > span:hover{
             cursor:pointer;
         }
         .rating > span:hover:before,
         .rating > span:hover ~ span:before{
            content: "\2605";
            position: absolute;
        }

JavaScript

// A star-rating UX example with a little CSS