JSFiddle - React, Tailwind, and code Playground

HTML

<link type="text/css" id="jTheme" rel="stylesheet" media="all" href="http://jquery-ui.googlecode.com/svn/tags/1.8.23/themes/hot-sneaks/jquery-ui.css" />
      
<script>
        $(function () {
           
            //Theme click handler
            var $themes = $('#themes');
            var $themelist = $('#theme-list');
            var $themesSelect = $('.themes-el');
            
            var themeLinkPos = $themes.position();
            $themelist.dialog({
                position: [themeLinkPos.left - 200, themeLinkPos.top + 20],
                autoOpen: false,
                title: 'Select a theme',
                /*hide: { effect: 'drop', direction: "down" },
                show: { effect: 'drop', direction: "up" },*/
                hide: "fade",
                show: "slide",
                draggable: false,
                height: 300
            });
            
            $themes.click (function (e) {
                e.stopPropagation();
                $themelist.dialog('open');
            }).hover(function () {
                $(this).addClass('ui-state-highlight');
            }, function () {
                $(this).removeClass('ui-state-highlight');
            });
            
            $themelist.click (function (e) {
                e.stopPropagation();
            });
            
            $themesSelect.click (function () {
                $themesSelect.removeClass('ui-state-highlight');
                $(this).addClass('ui-state-highlight');
                
                var selectedTheme = $(this).data('theme');
                $themelist.dialog('close');
                util.showOverlay($('body'), 'Loading the new theme, Please wait..', function (selectedTheme) {
                    var linkURL = $('#jTheme')[0].href;
                    linkURL = linkURL.substring(0, linkURL.indexOf('\/themes\/') + 8);
                    
                    $('#jTheme')[0].href = linkURL + selectedTheme + '/jquery-ui.css';
         ...

CSS

body {
            font-family: Arial, Tahoma, Helvetica, sans-serif;
            font-size: 8pt;
            background-color: #f2f2f2;
        }

        a, a:link, a:visited, a:active, a:hover {  text-decoration: none; }

        ul li { list-style: none; }

        #header {    
            padding: 8px;
            padding-bottom: 0px;
        }

        #theme-list { padding: 5px; display: none; }
        .themes-el { padding: 3px; font-size: 1.1em; cursor: pointer; }
        .theme-text { display: inline-block; vertical-align: top; }
        #themes { padding: 2px 5px; padding-bottom: 0px; cursor: pointer; }

        h2 {
            letter-spacing: 1px;
            margin-bottom: 3px; 
            padding: 5px;
            font-size: 1.2em;        
        }

        h2.title { font-size: 1.1em; padding-left: 12px; }

        h1 {
            font-size: 1em;
            letter-spacing: 1px;
            margin-bottom: 3px; 
            padding: 5px;
        }

        #footer {
            background-color: white;
            border-bottom: 3px solid #c2c2c2;
            padding: 7px 5px;
        }

        #page-content {  padding: 7px 0px; margin: 2px; }

        /*#sidebar, #main-content {  margin: 3px 1px; }

        #sidebar {
            width: 130px;
            background-color: white;
            float: left;
            padding: 6px;
        }*/
        #main-content {
            border: 1px solid #a2a2a2;
            padding: 6px;
            padding-bottom: 10px;
            /*background-color: #ebf1f9;
            margin-left: 145px;*/
        }
        #main-content { min-height: 600px; }        

        #c_overlay {
         /*filter:alpha(opacity=20); 
         -moz-opacity: 0.2; 
         opacity: 0.2;*/ 
         z-index: 1010; 
         position: absolute; 
         top: 0; 
         left: 0;
         background-color: white;
        }    
        #c_overlay_status {
            border: 1px solid black;
            font-size: 0.9em;
  ...