JSFiddle - React, Tailwind, and code Playground

by Frank Topel

HTML

<form class="rtl">
    <fieldset>
        <input type="radio" id="5" name="starrating" value="5" />
        <label for="5"></label>
        <input type="radio" id="4" name="starrating" value="4" />
        <label for="4"></label>
        <input type="radio" id="3" name="starrating" value="3" />
        <label for="3"></label>
        <input type="radio" id="2" name="starrating" value="2" />
        <label for="2"></label>
        <input type="radio" id="1" name="starrating" value="1" />
        <label for="1"></label>
        <p class="msg"></p>
    </fieldset>
</form>

CSS

.rtl {
    direction: rtl;
    text-align: left;
}
p.msg {
    direction: ltr;
}
input[type=radio][name='starrating'] {
    display: none;
}
label:after {
    font-size: 100px;
    color: silver;
    transition-duration: 0.3s;
}
label:after {
    content:"♥";
    display: inline-block;
}
input[name='starrating']:checked ~ label:after {
    color: red;
}
label:hover:after, label:hover ~ label:after {
    color: orange !important;
    transform: scale(1.1);
}
p.msg:after {
    content: "Please rate us!";
}
input[name='starrating']:checked ~ p.msg:after {
    content: "Thank you!";
    color: green;
}