JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
  </head>
  <body>
    <div class="rating">
      <ul class="unit-rating">
        <li><a href="#" title="10" class="r-unit" onclick="doRate('10', '3343'); return false;"><i class="unit-star"></i></a></li>
        <li><a href="#" title="9" class="r-unit" onclick="doRate('9', '3343'); return false;"><i class="unit-star"></i></a></li>
        <li><a href="#" title="8" class="r-unit" onclick="doRate('8', '3343'); return false;"><i class="unit-star"></i></a></li>
        <li><a href="#" title="7" class="r-unit" onclick="doRate('7', '3343'); return false;"><i class="unit-star"></i></a></li>
        <li class="active"><a href="#" title="6" class="r-unit" onclick="doRate('6', '3343'); return false;"><i class="unit-star"></i></a></li>
        <li><a href="#" title="5" class="r-unit" onclick="doRate('5', '3343'); return false;"><i class="unit-star"></i></a></li>
        <li><a href="#" title="4" class="r-unit" onclick="doRate('4', '3343'); return false;"><i class="unit-star"></i></a></li>
        <li><a href="#" title="3" class="r-unit" onclick="doRate('3', '3343'); return false;"><i class="unit-star"></i></a></li>
        <li><a href="#" title="2" class="r-unit" onclick="doRate('2', '3343'); return false;"><i class="unit-star"></i></a></li>
        <li><a href="#" title="1" class="r-unit" onclick="doRate('1', '3343'); return false;"><i class="unit-star"></i></a></li>
        </ul>
    </div>
</body>
</html>

CSS

.rating {height: 14px;font-size: .9em;margin: 3px 0;display: inline-block;z-index: 1;position: relative;}
.rating i {display: inline-block;font: normal normal normal 14px/1 "Font Awesome 5 Free";color: #c1c1c1;font-size: 1rem;text-rendering: auto;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;font-size:30px}
.rating i:before {content: "\f005";}
.rate {margin-top: 5px;}
.unit-rating {list-style: none;margin: 0;padding: 0;height: 20px;}
.unit-rating li {display: block;float: right;cursor: pointer;}
.unit-rating li.active i,
.unit-rating li.active ~ li i{color: #61b4fd;}
.unit-rating li:hover a i,
.unit-rating li:hover ~ li a i{color: #00ada5!important;}