JSFiddle - React, Tailwind, and code Playground

by anmol sandal

HTML

<span class="rating">
    <input type="radio" class="rating-input"
           id="rating-input-1-5" name="rating-input-1">
    <label for="rating-input-1-5" class="rating-star"></label>
    <input type="radio" class="rating-input"
           id="rating-input-1-4" name="rating-input-1">
    <label for="rating-input-1-4" class="rating-star"></label>
    <input type="radio" class="rating-input"
           id="rating-input-1-3" name="rating-input-1">
    <label for="rating-input-1-3" class="rating-star"></label>
    <input type="radio" class="rating-input"
           id="rating-input-1-2" name="rating-input-1">
    <label for="rating-input-1-2" class="rating-star"></label>
    <input type="radio" class="rating-input"
           id="rating-input-1-1" name="rating-input-1">
    <label for="rating-input-1-1" class="rating-star"></label>
</span>

CSS

.rating {
    overflow: hidden;
    display: inline-block;
}

.rating-input {
    float: right;
    width: 16px;
    height: 16px;
    padding: 0;
    margin: 0 0 0 -16px;
    opacity: 0;
    margin-right: 20px;
}

.rating-star {
    cursor: pointer;
    position: relative;
    display: block;
    width: 16px;
    height: 16px;
    background: #eee;
}

.rating-star:hover {
    background-position: 0 0;
}

.rating-star {
    position: relative;
    float: right;
    display: block;
    width: 16px;
    height: 16px;
    background: #000;
}

.rating-star:hover,
.rating-star:hover ~ .rating-star {
    background: #eee;
}

.rating-star:hover,
.rating-star:hover ~ .rating-star,
.rating-input:checked ~ .rating-star {
     background: #eee;
}

.rating:hover .rating-star:hover,
.rating:hover .rating-star:hover ~ .rating-star,
.rating-input:checked ~ .rating-star {
     background: #eee;
}

.rating-star,
.rating:hover .rating-star {
    position: relative;
    display: block;
    width: 16px;
    height: 16px;
    background: #000;
}