JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://github.com/lorenzos/MooStarRating/raw/master/Source/moostarrating.js"></script>
<!-- Basic form with "rating" radios -->
<form name="basic">
    <label>Basic usage:</label>
    <input type="radio" name="rating" value="1">
    <input type="radio" name="rating" value="2">
    <input type="radio" name="rating" value="3">
    <input type="radio" name="rating" value="4">
    <input type="radio" name="rating" value="5">
</form>

<!-- Here radios have a default value, 2 -->
<form name="simple">
    <label>Some options:</label>
    <input type="radio" name="rating" value="1">
    <input type="radio" name="rating" value="2" checked>
    <input type="radio" name="rating" value="3">
    <input type="radio" name="rating" value="4">
    <input type="radio" name="rating" value="5">
    <span id="simpleTip"></span>
</form>

<!-- Twelve radios, rating from 0.5 to 10.0 -->
<form name="advanced">
    <label>Advanced options:</label>
    <input type="radio" name="my_rating" value="0.5">
    <input type="radio" name="my_rating" value="1.0">
    <input type="radio" name="my_rating" value="1.5">
    <input type="radio" name="my_rating" value="2.0">
    <input type="radio" name="my_rating" value="2.5">
    <input type="radio" name="my_rating" value="3.0">
    <input type="radio" name="my_rating" value="3.5">
    <input type="radio" name="my_rating" value="4.0">
    <input type="radio" name="my_rating" value="4.5" checked>
    <input type="radio" name="my_rating" value="5.0">
    <input type="radio" name="my_rating" value="5.5">
    <input type="radio" name="my_rating" value="6.0">
    <input type="radio" name="my_rating" value="6.5">
    <input type="radio" name="my_rating" value="7.0">
    <input type="radio" name="my_rating" value="7.5">
    <input type="radio" name="my_rating" value="8.0">
    <input type="radio" name="my_rating" value="8.5">
    <input type="radio" name="my_rating" value="9.0">
    <input type="radio" name="my_rating" value="9.5">
    <input...

CSS

/* CSS for this example. You don't need any in your pages */

form {
    margin: 10px 0; }

form label, form span {
    font-size: 12px;
    color: #999999;
    position: relative;
    top: -3px;
    display: inline-block;
    font-weight: bold;
    font-family: sans-serif; }

form label {
    text-align: right;
    width: 120px;
    padding-right: 3px;
    color: #666666; }

JavaScript

// Default images folder definition. You will use your own.
MooStarRatingImages.defaultImageFolder = 
    'https://github.com/lorenzos/MooStarRating/raw/master/Graphics';

// ================================================================

// Basic usage, give only form name or ID
var basicRating = new MooStarRating({ form: 'basic' });

// If you want more, keep reading this code or see docs!

// ================================================================

// Some simple options
var simpleRating = new MooStarRating({
    form: 'simple',
    imageEmpty: 'star_boxed_empty.png', // Different image
    imageFull:  'star_boxed_full.png',  // Different image
    imageHover: 'star_boxed_hover.png', // Different image
    width: 17,                          // One pixel bigger
    tip: 'Rate [VALUE]/[COUNT]',        // Mouse rollover tip
    tipTarget: $('simpleTip')           // Tip element
});

// ================================================================

// Advanced options
var advancedRating = new MooStarRating({
    form: 'advanced',
    radios: 'my_rating',                // Radios name
    half: true,                         // That means one star for two values!
    imageEmpty: 'star_boxed_empty.png', // Different image
    imageFull:  'star_boxed_full.png',  // Different image
    imageHover: 'star_boxed_hover.png', // Different image
    width: 17,                          // One pixel bigger
    tip: 'Rate <i>[VALUE] / 10.0</i>', // Mouse rollover tip
    tipTarget: $('htmlTip'),            // Tip element
    tipTargetType: 'html'               // Tip type, now is HTML, not only text
});

// ================================================================

// Click callback function
function myCallback(value) {
    alert(
        "Star clicked, rated " + value + "\n" +
        "Now you can send your ajax requests to store rating \n" + 
        "or simply call myForm.send() to submit your form!"
    );
}

// Click...