JSFiddle - React, Tailwind, and code Playground

by Mukul kant

HTML

<span class="stars s-2.5" data-default='2.5'>
    0 stars
</span>

CSS

/**
     CSS & HTML From @CSSWizardry's JSFiddle: 
        http://jsfiddle.net/csswizardry/KL5Vs/
**/
.stars{
    display:block;
    width:80px;
    background-position:0 -16px;
    position:relative;
    
    text-indent:100%;
    white-space:nowrap;
    overflow:hidden;
}
.stars,
    .stars:after{
        height:16px;
        background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAgCAIAAACU62+bAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAldJREFUeNqMVMuOEkEUPY0EQksHFBIHXKgxEBIW+gGYsHVhcOXCzfgp8wluTVjgxoQlP4C4x2QmhkAgRFagBmLzGKAJ2J6qAqaZ7mHm5qa4j3Nudd1bhWbbNtzy5ZlY3/90Z3we6P43rHpCe5W7Eb6f4TGE/vh4BwLL/6nhAYTSoHuMsBqL8ieAX+qJ3I1Bh2h2/QzTntBBTQQMICXRlDXQAabSTuRhPKVq9icgLlXf4dxC5hwYCvUhX8Jf4N7NaMgUAYTlSz6kT/GqhBZweTOBKQIIS5/KQx/nONCOLtF5/gGmF4FBpiT6sK1slO5F0GXKYw6jcwR2tiVVSUCmHOffT83EfdnB38AvGeHgHkEEV6ZrB14BXeIugH95vD3Hu54wLmRQx/6O7AiznhjN5Uu8ruHNV8RewHgiDLoMziVgezXUe2h/3vZKSqvFRiKTyWzLObL+q7Y6pF6vHxAcWY/3wPJTKWqf2x8Qyz+Uova5hdDv91k7IYUG3WsAbTKZMDEcDi3LUmi2IZ1Oi6O225qmGYaRTCaDwWA8Hqetlcvl0WgUkBIKhZiIRCJcxbgtazwec10sFispsVhMWy6XlUrFNM1sNuv3e7+J9XrdaDSi0WihUBBzYA1y5vN5KpVyc4judDq6rhPNncWh+UOHISaYPoK+6hKdXC7Hb91sNk4CXQaZUuiDtrJdiukkKFelrl9vNjQcDitjMBiIf5ZEgn1kkBEPAkfBtdvtspVsPG1+PVu8T3nsMJvNWJLnUwTOsVqtMnjwnfZOisVis9m0XcIgU3v3vwADALitWRkkbzItAAAAAElFTkSuQmCC);
    }
    .stars:after{
        content:"";
        background-position:0 0;
        position:absolute;
        top:0;
        bottom:0;
        left:0;
    }

.s-0:after      { width: 0  ; }
.s-0\.5:after   { width: 8px; }
.s-1:after      { width:16px; }
.s-1\.5:after   { width:24px; }
.s-2:after      { width:32px; }
.s-2\.5:after   { width:40px; }
.s-3:after      { width:48px; }
.s-3\.5:after   { width:56px; }
.s-4:after      { width:64px; }
.s-4\.5:after   { width:72px; }
.s-5:after      { width:80px; }


.loading {
    background:...

JavaScript

$(function(){
    $('body').on({
        mousemove: function(e){
            var $this = $(this);
            // Calculate number of stars
            var currentMousePosition = e.pageX - $this.offset().left;
            var width = $this.width();
            var rounded = Math.round((currentMousePosition/width)*10);

            var starNumber = rounded/2;

            // Remove + add Classes + Store current rating
            $this.removeClass().addClass('stars s-' + starNumber).attr('data-rating', starNumber);
        },
        mouseleave:function(){
            var $this = $(this); 
            $this.removeClass().addClass('stars s-' + $this.attr('data-default'));
        },
        click: function(){
            var $this = $(this);
            //Hide the current rating selector
            $this.replaceWith($('<div>', {
             'class': 'loading'
            }));

            // Send the request
            $.post('rating.php',{
                rating: $this.attr('data-rating')
            }, function(d){
                // Handle response
                if(d.result == 'error'){
                    alert(d.msg);
                } else {
                    $this.removeClass().addClass('stars s-' + d.rating).attr('data-default', d.rating)
                    $('.loading').replaceWith($this);
                }
            }, 'json');
        }
    }, '.stars');
});