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)
{
    // Round the score
    score = Math.round(score / 0.5) * 0.5;

    // Get the number of whole stars
    var iWholeStars = Math.floor(score);
    // Do we want a half star?
    var blnHalfStar = (iWholeStars < score);

    // Show the stars
    for (var iStar = 1; iStar <= iWholeStars; iStar++)
    {
        $('li.star-' + iStar, stars).addClass('full');
    }

    // And the half star
    if (blnHalfStar)
    {
        $('.star-' + iStar, stars).addClass('half');
    }
}

populateStars($('.big-stars'), 3.75)