JSFiddle - React, Tailwind, and code Playground

by Adam Boduch

HTML

<div class="ui-rating">
<div>   
    <span>&#9733;</span>
    <span>&#9733;</span>
    <span>&#9733;</span>
    <span>&#9733;</span>
    <span>&#9733;</span>
</div>
</div>

CSS

body {
    margin: 2em;
    font-size: 0.8em;
}

div {
    overflow-x: hidden;
    color: blue;
}

JavaScript

$.widget( 'app.rating', {
    
    options: {
        character: '&#9733;',
        
    },

    create: function() {
        this._super();
        this.element.addClass( 'ui-rating' );
        this.refresh();
    },
         
    refresh: function() {
        var $container =     
    }
    
});