JSFiddle - React, Tailwind, and code Playground

HTML

<div>
        <span class='rating-5 rating-span'>
            <span class='rating-4 rating-span'>
                <span class='rating-3 rating-span'>
                    <span class='rating-2 rating-span'>
                        <span class='rating-1 rating-span'>
                            <span class='rating-star unselected'></span>
                        </span>
                        <span class='rating-star unselected'></span>
                    </span>
                <span class='rating-star unselected'></span>
                </span>
            <span class='rating-star unselected'></span>
            </span>
        <span class='rating-star unselected'></span>
        </span>
    </div>

CSS

/**
 * If you are developing a project that makes use of Dijit widgets, you will probably want to include the two files
 * below; otherwise, you can remove them. When building for release, Dojo will automatically combine all of your
 * @imported CSS files into a single file.
 */

@import '../../dojo/resources/dojo.css';
@import '../../dijit/themes/claro/claro.css';

/*div.rating-span{
    display:inline-block;
    height: 100%;
}*/

span.rating-star{
    display:block;
    float:right;
    width:230px;
    height:219px;
    /*border:solid thin black;*/
    padding:0px;
    margin:0px;
}

span.rating-star.unselected {
    background-image: url(http://danrumney.co.uk/images/star.jpg);
    background-repeat: no-repeat;
}

.rating-span:hover > span.rating-star {
    background-image: url(http://danrumney.co.uk/images/hover.jpg); 
    background-repeat: no-repeat;
}