JSFiddle - React, Tailwind, and code Playground

by cmoreira

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<span class="rating">
<span class="star "></span>
<span class="star "></span>
<span class="star"></span>
<span class="star filled"></span>
<span class="star filled"></span>
</span>

CSS

.rating {
    unicode-bidi:bidi-override;
    direction:rtl;
    font-size:30px;
}
.rating span.star {
    font-family:FontAwesome;
    font-weight:normal;
    font-style:normal;
    display:inline-block;
}
.rating span.star:hover {
    cursor:pointer;
}
.rating span.star:before {
    content:"\f006";
    padding-right:5px;
    color:#999999;
}
.rating span.star:hover:before, .rating span.star:hover~span.star:before {
    content:"\f005";
    color:#e3cf7a;
}


span.star.filled:before{ color:#e3cf7a; content:"\f005";}