JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu">
    <li id="file-menu"><a href="#">File</a>

        <ul>
            <li id="login"><a href="#">Log In</a>
            </li>
            <li id="open"><a href="#">Open</a>
            </li>
        </ul>
    </li>
    <li id="applications-menu"><a href="#">Applications</a>

        <ul>
            <li><a href="place">Chock Inventory View</a>
            </li>
            <li><a href="place">Roll Inventory View</a>
            </li>
        </ul>
    </li>
</div>
<!-- Hidden dialog boxes -->
<!-- Log In Box -->
<div id="login-form" title="Log in">
    <p class="validateTips">Both fields are required.</p>
    <form>
        <fieldset>
            <label for="name">Username</label>
            <input type="text" name="username" id="username" class="text ui-widget-content ui-corner-all" />
            <label for="password">Password</label>
            <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
        </fieldset>
    </form>
</div>
<!-- End Log In Box -->
<!-- Date/Turn Select Box -->
<div id="dateturn-form" title="Select a Date and Turn">
    <p class="validateTips">Please Select a Date and Turn.</p>
    <form>
        <fieldset>
            <div id="datepicker"></div>
            <label>Turn</label>
            <div id="turn-radio">
                <input type="radio" id="turn1" name="turn-radio" value="1" checked="checked">
                <label for="turn1">Turn 1</label>
                <input type="radio" id="turn2" name="turn-radio" value="2">
                <label for="turn2">Turn 2</label>
                <input type="radio" id="turn3" name="turn-radio" value="3">
                <label for="turn3">Turn 3</label>
            </div>
        </fieldset>
    </form>
</div>
<!-- End Date/Turn Select Box -->
<!-- Actual body -->
<div id="wrapper">
    <div id="header">
        	<h1 id="login">Temper Mill View</h1>

        <div id="users-contain" class="ui-widget">
           ...

CSS

#menu {
    height:30px;
    width: 100%;
}
#menu > li {
    float:left;
}
#menu > li > ul > li {
    position:relative;
    width:auto;
}
#file-menu {
    width:75px;
}
#applications-menu {
    width:160px;
}
label, input {
    display:block;
}
nput.text {
    margin-bottom:12px;
    width:95%;
    padding: .4em;
}
fieldset {
    padding:0;
    border:0;
    margin-top:25px;
}
h1 {
    font-size: 1.2em;
    margin: .6em 0;
}
div#framediv {
    border: 10px dashed;
    background:"#0f0f0f";
}
div#users-contain {
    width: 350px;
    margin: 20px 0;
}
div#users-contain table {
    margin: 1em 0;
    border-collapse: collapse;
    width: 100%;
}
div#users-contain table td, div#users-contain table th {
    border: 1px solid #eee;
    padding: .6em 10px;
    text-align: left;
}
.ui-dialog .ui-state-error {
    padding: .3em;
}
.validateTips {
    border: 1px solid transparent;
    padding: 0.3em;
}
#wrapper {
    width: 600px;
    overflow:auto;
    display: table;
    margin: 0 auto;
    border: 1px dashed;
}
#content-left {
    width:40%;
    float:left;
    overflow-x:auto;
}
#content-right {
    width:40%;
    float:right;
    overflow-x:auto;
}

JavaScript

$(function () {
    var username = $("#username"),
        password = $("#password"),
        allFields = $([]).add(username).add(password),
        tips = $(".validateTips"),
        dateinput = $("#datepicker"),
        turnvalue = $("input[name='turn-radio']:checked").val();
    $("#turn-radio").buttonset();
    $(function () {
        $("#datepicker").datepicker();
        $("#datepicker").datepicker('setDate', new Date());
    });

    function updateTips(t) {
        tips.text(t)
            .addClass("ui-state-highlight");
        setTimeout(function () {
            tips.removeClass("ui-state-highlight", 1500);
        }, 500);
    }

    function checkLength(o, n, min, max) {
        if (o.val().length > max || o.val().length < min) {
            o.addClass("ui-state-error");
            updateTips("Length of " + n + " must be between " + min + " and " + max + ".");
            return false;
        } else {
            return true;
        }
    }

    function checkRegexp(o, regexp, n) {
        if (!(regexp.test(o.val()))) {
            o.addClass("ui-state-error");
            updateTips(n);
            return false;
        } else {
            return true;
        }
    }

    $("#menu").menu({
        position: {
            my: "left top",
            at: "left bottom"
        }

    });


    $("#login-form").dialog({
        autoOpen: false,
        height: 350,
        width: 350,
        modal: true,
        buttons: {
            "Log In": function () {
                var bValid = true;
                allFields.removeClass("ui-state-error");

                bValid = bValid && checkLength(username, "username", 3, 16);
                bValid = bValid && checkLength(password, "password", 5, 16);

                bValid = bValid && checkRegexp(username, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter.");
                bValid = bValid && checkRegexp(password, /^([0-9a-zA-Z])+$/, "Password may...