JSFiddle - React, Tailwind, and code Playground

HTML

<div class="star-rating">
    <span>
        <strong>0</strong> 
    </span>
</div>

<div class="star-rating">
    <span>
        <strong class="rating">3.5</strong> 
    </span>
</div>

<div class="star-rating">
    <span>
        <strong>5</strong> 
    </span>
</div>

CSS

div.star-rating strong
{
			display: block;
			background: url(http://testing.wpovernight.com/wp-content/uploads/2013/03/stars.png) 0 -16px repeat-x;
			width: 80px;
			height: 16px;
		}	
		div.star-rating div {
			background-position: 0 0;
		}

JavaScript

$.fn.stars = function() {
    return $(this).each(function() {
        // Get the value
        var val = parseFloat($(this).html());
        // Make sure that the value is in 0 - 5 range, multiply to get width
        var size = Math.max(0, (Math.min(5, val))) * 16;
        // Create stars holder
        var $span = $('<strong />').width(size);
        // Replace the numerical value with stars
        $(this).html($span);
    });
}
$(function() {
    $('div.star-rating strong').stars();
});