JSFiddle - React, Tailwind, and code Playground

by alr3

HTML

<link rel="stylesheet" href="https://raw.github.com/nathansmith/960-Grid-System/master/code/css/960_16_col.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/redmond/jquery-ui.css">
<script src="http://cherne.net/brian/resources/jquery.hoverIntent.js"></script>
<br/><br/>
<div style="width:480" class="container_16">
    <div id="editDisplay" class=" editor-container " >
        
        <div class="ui-widget-header section-header">
            <span class="push_1">Edit Employees</span></div>
        
        <form action="/Employment" method="post">   
            
            <div class="editor-row">
                <div class="prefix_1 grid_3 alpha editor-label">
                    <label for="Name">Employer Name</label>
                </div>
                
                <div class="editor-field  ">
                    <input class="text-box single-line" data-val="true" data-val-length="The field Employer Name must be a string with a maximum length of 20." data-val-length-max="20" data-val-required="The Employer Name field is required." id="Name" name="Name" type="text" value="" />
                    <span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span>
                </div>
            </div>
            
            <div class="editor-row">
                
                <div class="prefix_1 grid_3 alpha editor-label">
                    <label for="EnteredEmployment" > EnteredEmployment </label>
                </div>
                
                <div class="editor-field  ">
                    <div id="EnteredEmploymentButSet" >
                        
                        <input checked="checked" data-val="true" data-val-required="The EnteredEmployment field is required." id="EnteredEmploymentrbT" name="EnteredEmployment" type="radio" value="False" />
                        
                        <label for="EnteredEmploymentrbT">
                    ...

CSS

.ui-buttonset  .ui-button-text {
    padding-top: 2px;
    padding-bottom: 2px;
    font-weight: normal;
    font-size: 13px;
}
.editor-container {
    display: table;
    border-style: solid;
    border-width: 2px;
    border-color: #05365b;
    padding: 0px;
    border-radius: 4px;
    -moz-border-radius: 4px 4px 4px 4px;
    width: 480px;
}
.editor-container .section-header {
    padding-bottom: 5px;
    padding-top: 8px;
    text-align: left;

}
.editor-container {
    margin-right: -2px;
    margin-left: -2px;
}

.editor-container hr {
    border: none;
    height: 1px;
    background-color: #a11616;  /* for chrome */
    color:  #a11616;
    margin-top: 3px;
    margin-bottom: 3px;
}

.editor-row {
    vertical-align: middle;
    display: block;
}
.editor-label {
    padding-left: .4em;
}
.editor-field {
    width: 100%;
}
.editor-label, .editor-field {
    display: table-cell;
}

JavaScript

var clearGrid960 = "<div class='clear'></div>";
var formInit = {
    formInintialize: function(formName, parentRowClass) {

        if (undefined === formName) return;
        if (undefined === parentRowClass) parentRowClass = '.editor-row';

        var formEditRows = $(formName + ' ' + parentRowClass);

        formEditRows.each(function() {
            $(this).before('<hr />');
            $(this).after(clearGrid960);
        });


        $(formName + ' .editor-field').each(function() {
            $(this).after(clearGrid960);
        });

    }
};

formInit.formInintialize('#editDisplay');