JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<div id="loader"></div>
<input type="button" value="Show The Loader" onclick="showLoader();" />
<input type="button" value="Show The Dialog" onclick="showDialog();" />

<div class="demo">
    
    <div id="dialog" title="Basic dialog">
        <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
    </div>
    
    
</div><!-- End demo -->

CSS

@charset "utf-8";
/*
* jQuery UI CSS Framework
* Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.
*/
/* Layout helpers
----------------------------------*/
.ui-helper-hidden { display: none; }
.ui-helper-hidden-accessible { position: absolute; left: -99999999px; }
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.ui-helper-clearfix { display: inline-block; }
/* required comment for clearfix to work in Opera \*/
* html .ui-helper-clearfix { height:1%; }
.ui-helper-clearfix { display:block; }
/* end clearfix */
.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }
/* Interaction Cues
----------------------------------*/
.ui-state-disabled { cursor: default !important; }
/* Icons
----------------------------------*/
/* states and images */
.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }
/* Misc visuals
----------------------------------*/
/* Overlays */
.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
/* Dialog
----------------------------------*/
.ui-dialog { position: relative; padding: .2em; width: 300px; }
.ui-dialog .ui-dialog-titlebar { padding: 0.4em 1em; position: relative;  }
.ui-dialog .ui-dialog-title { float: left; margin: 0.1em 16px 0.1em 0; } 
.ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; }
.ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; }
.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; }
.ui-dialog .ui-dialog-content { border: 0; padding:...

JavaScript

function showLoader() {
    $('#loader').fogLoader();
    setTimeout('$("#loader").fogLoader("destroy");clearInterval(_progid);',1000);
}

function showDialog() {
    $("#dialog").dialog('destroy');
    $("#dialog").dialog({modal: true});
};

/*
* fogLoader 0.9.1
* Author: Corbin Camp ([email protected])
* licensed under GPL licenses
*/
(function($){
        
    $.fn.fogLoader = function(options){
        var defaults = {
            message: 'Loading',
            animated: false,
            closeOnEscape: true,
            height: 25,
            maxHeight: false,
            maxWidth: false,
            minHeight: 15,
            minWidth: 20,
            position: 'center',
            width: 130,
            textAlign: 'center',
            wrapText: 'nowrap',
            fontSize: '1.2em',
            fontFamily: null,
            fontWeight: 'normal',
            borderRadius: null,
            borderWidth: '1px',
            style: 'message',
            progressMax: 10,
            progressChar: '.',
            progressSpell: false,
            progressDelay: 250,
            progressBarImage: null,
            progressValue: 0
        };

        var _method = null;
        var _opts = null;
        var _spellCount = 1;
        var _spellIntervalID = '';

        var _methods = {
            close: function(){
                      $('.ui-progressbar').remove();
                      clearInterval(_spellIntervalID);
                      $(this).dialog('close');
                   },
            destroy: function(){
                       $('.ui-progressbar').remove();
                       clearInterval(_spellIntervalID);
                       $(this).dialog('destroy').addClass('ui-widget-header');
       $('.ui-dialog-titlebar').removeClass('ui-state-default');//.addClass('ui-widget-header')
                   },
            updateProgress: function(v){
                        fillProgressBar(v);          
                   }
        };
      
  ...