JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="big-stars">
    <li class="star-1">1</li>
    <li class="star-2">2</li>
    <li class="star-3">3</li>
    <li class="star-4">4</li>
    <li class="star-5">5</li>
</ul>

CSS

.big-stars li {
    text-indent: -9999px;
    width: 49px;
    height: 46px;
    background: red url('../images/big_star_empty.png');
    margin-bottom: 5px;
    }
.big-stars .full {
    background: green url('../images/big_star_full.png'); 
    }
.big-stars .half {
    background: orange url('../images/big_star_half.png'); 
    }

JavaScript

function populateStars (stars, score)
{
   score = Math.round(score * 2) / 2;
   var scoreParts = score.toString().split('.');
   $(stars + ' li:lt('+ scoreParts[0]+')').addClass('full');
   
   if(scoreParts[1])
   {
       $(stars + ' li:eq('+ scoreParts[0] +')').addClass('half');
   }
}

populateStars('.big-stars', 3.6455)