JSFiddle - React, Tailwind, and code Playground

Star Rating

by Jennifer Perrin

HTML

<div class="star-rating js-star-rating">
    <input class="star-rating-input" type="radio" name="rating" value="1" /><i class="star-rating-star"></i>

    <input class="star-rating-input" type="radio" name="rating" value="2" /><i class="star-rating-star"></i>

    <input class="star-rating-input" type="radio" name="rating" value="3" /><i class="star-rating-star"></i>

    <input class="star-rating-input" type="radio" name="rating" value="4" /><i class="star-rating-star"></i>

    <input class="star-rating-input" type="radio" name="rating" value="5" /><i class="star-rating-star"></i>

    <div class="current-rating current-rating--2-5"><i class="star-rating-star"></i>

    </div>
</div>

CSS

.star-rating {
    font-size: 0;
    position: relative;
    width: 103px;
    height: 20px;
    overflow: hidden;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACUAAAAkCAYAAAAOwvOmAAACZ0lEQVR42s2Yz0sUYRjH+wVmB4lCOgR66BAegoQU/4SgQ4culSeRoEKiU0QRrHpSwcCDFEREBMGSiMIOdpA9bGwbLTML+1MjQlE8GGmXgpTdPk/MxrLMzsDM484ufFne2ff9vp95nnee9905VKlUVFQqlQa1vFRM0un0CaB2TNPsbBmoYrF4E6hKoVC42zJQAMUECiVaAkpSRqT2bKhyPp/vCh0KoBEBqooUPmgFqI+1UMgKFSqbzZ4TkHpxvSc0KFL1xAkKjYUGRepKTlBc/xIKFJNfEoBGyuVyfWFAPXWDIlrTTYWKRqNHmXTLA2ozEokc8QWFwRAGb9EcWkRLXFtGCfSJtolyaAV9k8nQd3tyL23QdxVlUZr2B9vbQPP2vK/QczTDgzOJrv+7azpMoLIYhazXsrn/Dxnbw1Uu7oYE85tI3aqyOBVDq5lAUj4IyEXXhR6Px4/T8WWTgN6lUqmOega3aj0sYT0gmD/43/dVEghrLyZflaHWARoIVKcsyzoppUIJyMDrtErx5HMYs0cBYMoyXnxUK3p1r/MrUtatvs1wp6MBoe4cBJQZcD3FVKEymcxZhUX+K5lMtqtBYXhbAUpSeEUTKuZ1GkCPSfEPj36zKlCya7tVdkDeSC2rppn2e5e+aypQcnpoMMk2k1xrUNNGZA01ALsQGAqjFw7GC5wozniMO0+/zw5jHwaCkruuO/b+REMeprUnjmNS39BejUciEBSp668xW/b7nkB8AFuxffZpn/INxSM8bq+NexI1hXdYs3YKb/iGYvAzWRs+INyidhnfKd9Q8qdCvrVlGEab2+9/AaqhSf4SQ/sOAAAAAElFTkSuQmCC");
    background-size: contain;
    margin: 0 auto;
}
.star-rating-star {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 20%;
    height: 100%;
    opacity: 0;
    background-image:...