JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.11.1.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>

<section>
  <form id="my-form">
    <h2>Configuration</h2>
    <div style="float: left;">
      <fieldset id="config-button">
        <legend>Buttons</legend>
        <div>
          <input type="checkbox" id="button-close" checked="checked" />
          <label for="button-close">Close button</label>
        </div>
        <div>
          <input type="checkbox" id="button-maximize" checked="checked" />
          <label for="button-maximize">Maximize button</label>
        </div>
        <div>
          <input type="checkbox" id="button-minimize" checked="checked" />
          <label for="button-minimize">Minimize button</label>
        </div>
        <div>
          <input type="checkbox" id="button-collapse" checked="checked" />
          <label for="button-collapse">Collapse button</label>
        </div>
      </fieldset>
      <fieldset id="config-icon">
        <legend>Icons</legend>
        <div class="wrapper">
          <ins class="ui-state-default ui-corner-all"></ins>
          <label for="icon-close">Close:</label>
          <select id="icon-close" name="icon" rel="close">
            <option value="ui-icon-closethick">(default)</option>
            <option value="ui-icon-close">ui-icon-close</option>
            <option value="ui-icon-cancel">ui-icon-cancel</option>
            <option value="ui-icon-circle-close">ui-icon-circle-close</option>
          </select>
        </div>
        <div class="wrapper">
          <ins class="ui-state-default ui-corner-all"></ins>
          <label for="icon-maximize">Maximize:</label>
          <select id="icon-maximize" name="icon" rel="maximize">
            <option value="ui-icon-extlink">(default)</option>
            <option value="ui-icon-carat-1-ne">ui-icon-carat-1-ne</option>
            <option...

CSS

<style id="jsbin-css">
  body { color: #333333;  font-family: Times, Helvetica, Arial; font-size: 16px; }
  .ui-dialog { font-size: 12px; }
  /***** HEADER *****/
  header { background-color: orange; border-radius: 1em; box-shadow: inset 0 0 10px gray; padding: 1em 1.5em 1.5em 1.5em; }
  header h1 { margin: 0 0 0.5em 0; }
  header ul { margin: 1em 0 0 0; }
  /***** CONTENT *****/
  section fieldset { margin: 5px; width: 200px; }
  section label { cursor: pointer; }
  #config-icon .wrapper { clear: both; }
  #config-icon ins { float: left; margin: 0 5px 0 0; }
  #config-icon label { float: left; }
  #config-icon select { float: right; width: 100px; }
  #config-method button { width: 48%; }
  /***** FOOTER *****/
  footer { clear: both; padding-top: 2em; }
  footer button { background-color: #e0e0e0; border: none; border-radius: 1em; box-shadow: 0 5px 5px silver; cursor: pointer; font-size: 200%; padding: 10px 0 10px 0; text-align: center; width: 10em; }
  footer button:hover { background-color: #d0d0d0; box-shadow: 0 5px 5px #aaaaaa; }
  footer button:active { box-shadow: 0 4px 4px #aaaaaa; position: relative; top: 1px; }
  </style>

JavaScript

$(function(){
  var last;

  // preview icon
  $("#config-icon select")
    .change(function(){
      var icon = "<span class='ui-icon "+$(this).val()+"'></span>";
      $(this).parents(".wrapper").find("ins").html(icon);
    })
    .trigger("change");


  // click to open dialog
  $("#new-dialog").click(function(){
    //dialog options
    var dialogOptions = {
      "title" : "dialog@",
      "width" : 400,
      "height" : 300,
      "modal" : $("#is-modal").is(":checked"),
      "resizable" : $("#is-resizable").is(":checked"),
      "draggable" : $("#is-draggable").is(":checked"),
      "close" : function(){
        if(last[0] != this){
          $(this).remove(); 
        }
      }
    };
    if ( $("#button-cancel").is(":checked") ) {
      dialogOptions.buttons = { "Cancel" : function(){ $(this).dialog("close"); } };
    }
    // dialog-extend options
    var dialogExtendOptions = {
      "closable" : $("#button-close").is(":checked"),
      "maximizable" : $("#button-maximize").is(":checked"),
      "minimizable" : $("#button-minimize").is(":checked"),
      "minimizeLocation" : $("#my-form [name=minimizeLocation]:checked").val() || false,
      "collapsable" : $("#button-collapse").is(":checked"),
      "dblclick" : $("#my-form [name=dblclick]:checked").val() || false,
      "titlebar" : $("#my-form [name=titlebar]:checked").val() || false
    };
    $("#my-form [name=icon]").each(function(){
      if ( $(this).find("option:selected").html() != "(default)" ) {
        dialogExtendOptions.icons = dialogExtendOptions.icons || {};
        dialogExtendOptions.icons[$(this).attr("rel")] = $(this).val();
      }
    });
    $("#my-form [name=event]").each(function(){
      if ( $(this).is(":checked") ) {
        dialogExtendOptions[$(this).attr("rel")] = function(evt, a,b,c) {
         
        };
      }
    });
    // open dialog
    last = $("<div...