JSFiddle - React, Tailwind, and code Playground

by fyneworks

HTML

<script type="text/javascript" src="http://jquery-star-rating-plugin.googlecode.com/svn/trunk/jquery.js"></script>
<script type="text/javascript" src="http://jquery-star-rating-plugin.googlecode.com/svn/trunk/jquery.MetaData.js"></script>
<script type="text/javascript" src="http://jquery-star-rating-plugin.googlecode.com/svn/trunk/jquery.rating.pack.js"></script>
<link rel="stylesheet" type="text/css" href="http://jquery-star-rating-plugin.googlecode.com/svn/trunk/jquery.rating.css"/>

<p>
    class="{split:10}" won't work because the icon is only 16px wide and there's no way to make the browser create 10 equal strips that are 1.6 pixels wide
</p>
    

<form class="default">

<input class="{split:10}" type="radio" name="my-rating-01" value="0"/>
<input class="{split:10}" type="radio" name="my-rating-01" value="1"/>
<input class="{split:10}" type="radio" name="my-rating-01" value="2"/>
<input class="{split:10}" type="radio" name="my-rating-01" value="3"/>
<input class="{split:10}" type="radio" name="my-rating-01" value="4"/>
<input class="{split:10}" type="radio" name="my-rating-01" value="5"/>
<input class="{split:10}" type="radio" name="my-rating-01" value="6"/>
<input class="{split:10}" type="radio" name="my-rating-01" value="7"/>
<input class="{split:10}" type="radio" name="my-rating-01" value="8"/>
<input class="{split:10}" type="radio" name="my-rating-01" value="9"/>
<input class="{split:10}" type="radio" name="my-rating-01" value="10"/>
<input class="{split:10}" type="radio" name="my-rating-01" value="11"/>
<input class="{split:10}" type="radio" name="my-rating-01" value="12"/>
<input class="{split:10}" type="radio" name="my-rating-01" value="13"/>
<input class="{split:10}" type="radio" name="my-rating-01" value="14"/>
<input class="{split:10}" type="radio" name="my-rating-01" value="15"/>
<input class="{split:10}" type="radio" name="my-rating-01" value="16"/>
<input class="{split:10}" type="radio" name="my-rating-01" value="17"/>
<input class="{split:10}"...

CSS

.tweaked div.rating-cancel a, 
.tweaked div.star-rating a{ width:20px!important; }

JavaScript

$('.default input').rating();
$('.tweaked input').rating({starWidth:20});