JSFiddle - React, Tailwind, and code Playground

by andrewwhitaker

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.all.css">
<div id="UserDetailsDialog">
    <div class="editor-label"><label>Parent Division: </label><label id="lblParentEntity"></label></div>

    <div class="editor-label"><label for="txtUsername">Username</label></div>
    <div class="editor-field"><input class="text-box single-line" id="txtUsername" name="Username" type="text" value="" /></div>
    
    <div class="editor-label"><label for="txtPassword">Password</label></div>
    <div class="editor-field"><input class="text-box single-line password" id="txtPassword" name="Password" type="password" value=""></div>
    
    <div class="editor-label"><label for="txtFirstName">First Name</label></div>
    <div class="editor-field"><input class="text-box single-line" id="txtFirstName" name="FirstName" type="text" value="" /></div>
    
    <div class="editor-label"><label for="txtLastName">Last Name</label></div>
    <div class="editor-field"><input class="text-box single-line" id="txtLastName" name="LastName" type="text" value="" /></div>
    
    <div class="editor-label"><label for="txtMiddleName">Middle Name</label></div>
    <div class="editor-field"><input class="text-box single-line" id="txtMiddleName" name="MiddleName" type="text" value="" /></div>
</div>

JavaScript

$(document).ready(function() {
    var dialogOptions = {
        title: "User Details",
        autoOpen: true,
        modal: false,
        buttons: {
            Create: function() {
                alert("open");
            },
            Cancel: function() {
                alert("close");
            }
        },
        width: "30%",
        show: "fade"
    };

    $("#UserDetailsDialog").dialog(dialogOptions);
    $("#UserDetailsDialog").dialog("disable")
        .closest(".ui-dialog")
        .find(":input")
        .prop("disabled", true);
});