JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/themes/base/jquery-ui.css">
<div id="container">
    <section id="demo2">
        <header>
            <h2>Test</h2>
        </header>
        
        <ul>
           <li>
              Step 1: Click show (green span shows up)
           </li>
           <li>
              Step 2: Click hide
           </li>
           <li>
              Step 3: Click show (the green span has now the twice the offset)
           </li>
        </ul>
        <p>
            <input type="text" value="10" id="play">
        </p>
        <p>
            <button id="show">Show</button>
        </p>
        <p>
            <button id="hide">Hide</button>
        </p>
    </section>
</div>

CSS

.ui-preloader {
    position: absolute;
    width: 16px;
    height: 16px;
    background: green;
}

JavaScript

/*
 * 
 * Depends:
 *        jquery.ui.core.js
 *        jquery.ui.widget.js
 *    jquery.ui.position.js
 */

$.widget('ui.preloader', {
    // default options
    options: {
        // Where to insert preloader: at the </body> on in the certain element. For example 'show more' facebook link
        appendTo: 'body',
        // minimum time (1 sec) to show preloader
        timeout : 1000,
        preloaderClass: '',
        // default position is at right side of text input and shifted 5px to the left
        position: {
            my: 'right center',
            at: 'right center',
            offset: '-5 0',
            collision: 'none'
        }
    },
    show: function() {
        var self = this;
        
        // set the correct offset and show
        
        self.preloader.position (self.options.position).show();
        // start timer
        self._startTimer();
    },
    _create: function() {
        var self = this,
            // document 
            doc = self.element[0].ownerDocument;

        self.preloader = $('<span class="ui-preloader"/>').hide ();
        
        if (self.options.preloaderClass) {
            self.preloader.addClass (self.options.preloaderClass);
        }


        self.preloader.appendTo($( self.options.appendTo || 'body', doc )[0] );
        
        self.options.position.of = self.options.position.of || self.element;
        console.log (self.element);
        // difference between starts and ends of ajax requests
        self._timer = null;
    },
    _checkDiff: function() {
        var self = this;
        if (self._difference == 0) {
            // This is actual hiding, while preloader('hide') is just checking
            self.preloader.hide();
        }
    },
    _stopTimer: function() {
        var self = this;
        self._difference += 1;
        self._checkDiff();
    },
    _startTimer: function() {
        var self = this;
        if (self._timer !== null) {
            clearTimeout(self._timer);
   ...