JSFiddle - React, Tailwind, and code Playground

by Mr_Vasu

HTML

<input id="star_1" value="1" type="radio" checked name="star"></input>
<label for="star_1"></label>
<input id="star_2" value="2" type="radio" name="star"></input>
<label for="star_2"></label>
<input id="star_3" value="3" type="radio" name="star"></input>
<label for="star_3"></label>
<input id="star_4" value="4" type="radio" name="star"></input>
<label for="star_4"></label>
<input id="star_5" value="5" type="radio" name="star"></input>
<label for="star_5"></label>

CSS

input[type="radio"] {
    visibility: hidden;
    pointer-events: none;
    position: absolute;
}
label {
    position: relative !important;
    margin-right: 50px;
    display: inline-block;
    margin-top: 30px;
    border-color: yellow transparent transparent transparent;
    border-top-width: 15px !important;
}
label:after, label:before, label {
    content:"";
    border-width: 20px;
    border-style: solid;
    position: absolute;
    left: 0;
    top: 0;
    cursor: pointer;
}
label:before {
    transform: rotate(20deg);
    border-color: transparent transparent transparent yellow;
    margin-left: -10px;
    margin-top: -22px;
    border-left-width: 15px;
}
label:after {
    transform: rotate(-20deg);
    border-color: transparent yellow transparent transparent;
    margin-top: -22px;
    margin-left: -28px;
    border-right-width: 15px;
}
:checked + label {
    border-color: yellow transparent transparent transparent;
}
:checked + label:before {
    border-color: transparent transparent transparent yellow;
}
:checked + label:after {
    border-color: transparent yellow transparent transparent;
}
:checked + label ~ label {
    border-color: red transparent transparent transparent;
}
:checked + label ~ label:before {
    border-color: transparent transparent transparent red;
}
:checked + label ~ label:after {
    border-color: transparent red transparent transparent;
}