JSFiddle - React, Tailwind, and code Playground

HTML

<div id="rating_bar"> 
    <span id="rate_1"></span>
    <span id="rate_2"></span>
    <span id="rate_3"></span>
    <span id="rate_4"></span>
    <span id="rate_5"></span>
</div>

CSS

#rating_bar {
    width:100px;
    height:100px;
    margin: 4px 175px !important;
    display:inline-block;
    display:inline;
}
#rating_bar > span:before {
    content:'O';
    color: #c7c5c5;
    cursor:pointer;
    font-size:3em;
}
#rating_bar:hover > span:before {
    color: #FFFFFF;
}

#rating_bar > span:hover ~ span:before {
    color: #c7c5c5;
}