JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://use.fontawesome.com/9dd0d141ad.js"></script>
<div class="rating-box">Rating: 1/10<br /><span class="add-rate" onmouseup="rate('montauk', '1', 'rate.php')"><i class="fa fa-star" aria-hidden="true"></i></span> <span class="add-rate" onmouseup="rate('montauk', '2', 'rate.php')"><i class="fa fa-star" aria-hidden="true"></i></span> <span class="add-rate" onmouseup="rate('montauk', '3', 'rate.php')"><i class="fa fa-star" aria-hidden="true"></i></span> <span class="add-rate" onmouseup="rate('montauk', '4', 'rate.php')"><i class="fa fa-star" aria-hidden="true"></i></span> <span class="add-rate" onmouseup="rate('montauk', '5', 'rate.php')"><i class="fa fa-star" aria-hidden="true"></i></span> <span class="add-rate" onmouseup="rate('montauk', '6', 'rate.php')"><i class="fa fa-star" aria-hidden="true"></i></span> <span class="add-rate" onmouseup="rate('montauk', '7', 'rate.php')"><i class="fa fa-star" aria-hidden="true"></i></span> <span class="add-rate" onmouseup="rate('montauk', '8', 'rate.php')"><i class="fa fa-star" aria-hidden="true"></i></span> <span class="add-rate" onmouseup="rate('montauk', '9', 'rate.php')"><i class="fa fa-star" aria-hidden="true"></i></span> <span class="add-rate" onmouseup="rate('montauk', '10', 'rate.php')"><i class="fa fa-star" aria-hidden="true"></i></span>

CSS

.add-rate {
    font-size: 20px;
    cursor: pointer;
    color: gray;
}
.add-rate:hover,
.add-rate:hover ~ .add-rate:before {
    color: orange;
}