JSFiddle - React, Tailwind, and code Playground

by cjwprostar

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/smoothness/jquery-ui.css">
<div id="main-content">
    <div id="filter-panel" class="panel">Placeholder<!-- Needs to fill to bottom --></div>
    <div id="content-panel" class="panel">
        <div class="title-bar ui-helper-clearfix">
            <div class="title-info"> <span class="title">Centerpoint Energy</span><a class="title-link" href="http://www.google.com/" target="_blank"><img src="http://icons.iconarchive.com/icons/fatcow/farm-fresh/16/link-go-icon.png" alt="Web site"></a>

                <div class="sub-title">Sub-account of <a href="ACCOUNT">Centerpoint</a>

                </div>
            </div>
            <div class="title-buttons">
                <button class="editme action-button" title="Edit"></button>
                <button class="deleteme action-button" title="Delete"></button>
                <!-- TODO: Need a way to go back -->
            </div>
        </div>
        <hr />
        <div id="account-panel">
            <p id="account-description">CenterPoint Energy, Inc., headquartered in Houston, Texas, is a domestic energy delivery company that includes electric transmission &amp; distribution, natural gas distribution, competitive natural gas sales and services, interstate pipelines, and field services operations. The company serves more than five million metered customers primarily in Arkansas, Louisiana, Minnesota, Mississippi, Oklahoma, and Texas. Assets total more than $22 billion. With about 8,800 employees, CenterPoint Energy and its predecessor companies have been in business for more than 135 years.</p>
        </div>
        <div id="extra-panel">
            <div id="tabs">
                <ul>
                    <li><a href="#tabs-1">Addresses</a>

                    </li>
                    <li><a href="#tabs-2">Phone Numbers</a>

             ...

CSS

@CHARSET "UTF-8";
html, body {
    min-height: 100%;
}

body {
    background-color: #05abe0;
    background-image: -ms-linear-gradient(top, #05abe0 0%, #53cbf1 40%, #87e0fd 100%);
    background-image: -moz-linear-gradient(top, #05abe0 0%, #53cbf1 40%, #87e0fd 100%);
    background-image: -o-linear-gradient(top, #05abe0 0%, #53cbf1 40%, #87e0fd 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #05abe0), color-stop(40%, #53cbf1), color-stop(100%, #87e0fd));
    background-image: -webkit-linear-gradient(top, #05abe0 0%, #53cbf1 40%, #87e0fd 100%);
    background-image: linear-gradient(to bottom, #05abe0 0%, #53cbf1 40%, #87e0fd 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#05abe0', endColorstr='#87e0fd', GradientType=0);
    font-family: Trebuchet MS, Helvetica, Tahoma, Verdana, Arial, sans-serif;
    font-size: 62.5%;
}
#main-content {
    margin: 5em;
    /* Right is 2 + (width of fixed panel) */
    padding: 2em 37em 2em 2em;
    border-radius: 10px;
    background-color: #FCFCFC;
    white-space: nowrap;
    /* remember to add IE7 support */
}
.panel {
    display: inline-block;
    vertical-align: top;
    white-space: normal;
}
#filter-panel {
    width: 35em;
    background-color: #DBF0F7;
    
}
#content-panel {
    width: 100%;
    background-color: #F4D2F4;
}
#account-panel {
    background-color: #CFFEF0;
}
#extra-panel {
    background-color: #ECF4FF;
}
hr {
    margin: 0.8em auto;
}
/* Makes the button menus the correct size */
 .ui-menu {
    position: absolute
}
.icon {
    height: 16px;
    width: 16px;
}
.icon-edit {
    /* Use image map later */
    background-image: url("http://icons.iconarchive.com/icons/custom-icon-design/pretty-office-10/16/Pencil-icon.png") !important;
    background-position: 0px 0px;
}
.icon-delete {
    background-image: url("http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/16/Actions-edit-delete-icon.png") !important;
   ...

JavaScript

$(document).ready(function () {
    // Set up the tabs
    $("#tabs").tabs();
    // Use better tooltips
    /*$(document).tooltip({
        track: true,
        show: {
            delay: 200
        }
    });*/
    // Delete
    $(".deleteme")
        .button({
        label: "Delete",
        icons: {
            primary: "icon-delete"
        }
    }).click(function (event) {
        event.preventDefault();
        $(".mydialog").dialog("open");
    });
    $(".mydialog").dialog({
        autoOpen: false,
        resizable: false,
        height: 175,
        modal: true,
        buttons: {
            "Delete account": function () {
                $(this).dialog("close");
            },
            Cancel: function () {
                $(this).dialog("close");
            }
        }
    });
    // Edit
    $("#edit-account-dialog-form").dialog({
        create: function () {
            $("#edit-account-name").val($(".title").text());
            $("#edit-account-description").val($("#account-description").text());
            $("#edit-account-url").val($(".title-link").attr('href'));
            // TEMP. Will use a JS model to store
        },
        autoOpen: false,
        height: 350,
        width: 350,
        modal: true,
        buttons: {
            "Confirm": function () {
                /*var bValid = true;
                allFields.removeClass("ui-state-error");
                bValid = bValid && checkLength(name, "username", 3, 16);
                bValid = bValid && checkLength(email, "email", 6, 80);
                bValid = bValid && checkLength(password, "password", 5, 16);
                bValid = bValid && checkRegexp(name, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter.");
                // From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
                bValid = bValid && checkRegexp(email,...