JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.2.1/jquery-migrate.min.js"></script>
<div class="radio">
    <input type="radio" name='thing' value='valuable' id="easy" />
</div>
<div class="radio">
    <input type="radio" name='thing' value='valuable' id="medium" checked="checked" />
</div>
<div class="radio">
    <input type="radio" name='thing' value='valuable' id="hard" />
</div>
<div class="container">
    <div id="easyDIV">
        <img class="jqPuzzle jqp-r3-c3-SCN" src="http://lorempixel.com/g/400/200/sports" alt="If you can see this, then the image didn't load properly." id="sample" />
    </div>
    <div id="mediumDIV">
        <img class="jqPuzzle jqp-r4-c4-SCN" src="http://lorempixel.com/g/400/200/food" alt="If you can see this, then the image didn't load properly." id="sample1" />
    </div>
    <div id="hardDIV">
        <img class="jqPuzzle jqp-r5-c5-SCN" src="http://lorempixel.com/g/400/200/nature" alt="If you can see this, then the image didn't load properly." id="sample2" />
    </div>
</div>

CSS

/* Hide elements initially */
 #easyDIV, #hardDIV {
    visibility:hidden;
}

/* Position all images on top of each other*/
 .container {
    position:relative;
}
#easyDIV, #mediumDIV, #hardDIV {
    position: absolute;
    top:0;
    left:0;
}

JavaScript

(function ($) {
    $.fn.jqPuzzle = function (settings, texts) {

        // default settings
        var defaults = {

            rows: 4, // number of rows [3 ... 9]
            cols: 4, // number of columns [3 ... 9]
            hole: 16, // initial hole position [1 ... rows*columns]
            shuffle: false, // initially show shuffled pieces [true|false]
            numbers: true, // initially show numbers on pieces [true|false]
            language: 'en', // language for gui elements [language code]

            // display additional gui controls
            control: {
                shufflePieces: true, // display 'Shuffle' button [true|false]
                confirmShuffle: true, // ask before shuffling [true|false]
                toggleOriginal: true, // display 'Original' button [true|false]
                toggleNumbers: true, // display 'Numbers' button [true|false]
                counter: true, // display moves counter [true|false]
                timer: true, // display timer (seconds) [true|false]
                pauseTimer: false // pause timer if 'Original' button is activated 
                // [true|false]
            },

            // perform actions when the puzzle is solved sucessfully
            success: {
                fadeOriginal: true, // cross-fade original image [true|false]
                callback: undefined, // callback a user-defined function [function]
                // the function is passed an object as its argument
                // which includes the fields 'moves' and 'seconds'
                callbackTimeout: 300 // time in ms after which the callback is called
            },

            // animation speeds and settings
            animation: {
                shuffleRounds: 3, // number of shuffle rounds [1 ... ]
                shuffleSpeed: 800, // time in ms to perform a shuffle round
                slidingSpeed: 200, // time in ms for a single move
                fadeOriginalSpeed: 600 // time in ms to...