JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>

<p>Custom items</p>
	<div id="igRating1"></div>
    <br/>
	<p>Select only one</p>
	<div id="igRating2"></div>

CSS

#igRating1 .normal0 { background: transparent url("https://igniteui.com/images/samples/rating/slowempty.png") no-repeat !important; }
       #igRating1 .normal1 { background: transparent url("https://igniteui.com/images/samples/rating/fastempty.png") no-repeat !important; }
       #igRating1 .normal2 { background: transparent url("https://igniteui.com/images/samples/rating/fastestempty.png") no-repeat !important; }
       #igRating1 .selected0 { background: transparent url("https://igniteui.com/images/samples/rating/slow.png") no-repeat !important; }
       #igRating1 .selected1 { background: transparent url("https://igniteui.com/images/samples/rating/fast.png") no-repeat !important; }
       #igRating1 .selected2 { background: transparent url("https://igniteui.com/images/samples/rating/fastest.png") no-repeat !important; }
       #igRating1 .hovered0 { background: transparent url("https://igniteui.com/images/samples/rating/slow.png") no-repeat !important; }
       #igRating1 .hovered1 { background: transparent url("https://igniteui.com/images/samples/rating/fast.png") no-repeat !important; }
       #igRating1 .hovered2 { background: transparent url("https://igniteui.com/images/samples/rating/fastest.png") no-repeat !important; }

       #igRating2 .normal0 { background: transparent url("https://igniteui.com/images/samples/rating/slowempty.png") no-repeat !important; }
       #igRating2 .normal1 { background: transparent url("https://igniteui.com/images/samples/rating/fastempty.png") no-repeat !important; }
       #igRating2 .normal2 { background: transparent url("https://igniteui.com/images/samples/rating/fastestempty.png") no-repeat !important; }
       #igRating2 .selected0 { background: transparent url("https://igniteui.com/images/samples/rating/slow.png") no-repeat !important; }
       #igRating2 .selected1 { background: transparent url("https://igniteui.com/images/samples/rating/fast.png") no-repeat !important; }
       #igRating2 .selected2 { background:...

JavaScript

$(function () {

            var customCss = {},
                cssSnail,
                cssCheetah,
                cssRocket;

            customCss[0] = { 0: "normal0", 1: "selected0", 2: "hovered0" };
            customCss[1] = { 0: "normal1", 1: "selected1", 2: "hovered1" };
            customCss[2] = { 0: "normal2", 1: "selected2", 2: "hovered2" };

            $("#igRating1").igRating({
                voteCount: 3,
                valueAsPercent: false,
                precision: "whole",
                value: 0,
                voteWidth: 64,
                voteHeight: 38,
                cssVotes: customCss
            });


            cssSnail = [
                ["selected0", "selected0", "selected0"],
                ["normal1", "normal1", "normal1"],
                ["normal2", "normal2", "normal2"]
            ];
            cssCheetah = [
                ["normal0", "normal0", "normal0"],
                ["selected1", "selected1", "selected1"],
                ["normal2", "normal2", "normal2"]
            ];
            cssRocket = [
                ["normal0", "normal0", "normal0"],
                ["normal1", "normal1", "normal1"],
                ["selected2", "selected2", "selected2"]
            ];

            $("#igRating2").igRating({
                voteCount: 3,
                valueAsPercent: false,
                precision: "whole",
				precisionZeroVote: 0,
                value: 1,
                voteWidth: 64,
                voteHeight: 38,
                cssVotes: cssSnail,
                valueChange: function (evt, ui) {
                    var style;
                    switch (parseInt(ui.value, 10)) {
                        case 1: style = cssSnail; break;
                        case 2: style = cssCheetah; break;
                        case 3: style = cssRocket; break;
                    }
                    $(this).igRating("option", "cssVotes", style);
                }
            });

        });