JSFiddle - React, Tailwind, and code Playground

by photo_tom

HTML

<script src="http://cherne.net/brian/resources/jquery.hoverIntent.js"></script>
<div class="container_16">
    <div class="grid_8">
        <form action="/" method="post">       
            <div class="editor-row">
                <div class="grid_2 alpha editor-label">
                    <label for="FirstName">First Name</label>
                </div>
                <div class="grid_5 editor-field">
                    <input  id="FirstName" name="FirstName" placeholder="First is always important" tabindex="1" type="text" value="" />
                </div>
            </div>
            <div class="editor-row">
                <div class="grid_2 alpha editor-label">
                    <label for="LastName">Lasty Name</label>
                </div>
                <div class="grid_5 editor-field">
                    <textarea cols="30" id="LastName" name="LastName" placeholder="This is almost really important" rows="2" tabindex="2">
                    </textarea>
                </div>
            </div>
            <div class="editor-row">
                <div class="grid_2 alpha editor-label">
                    <label for="Title">Title</label>
                </div>
                <div class="grid_5 editor-field">
                    <input id="Title" name="Title" type="text" value="" />
                                   </div>
            </div>
            <div class="editor-row">
                <div class="grid_2 alpha editor-label">
                    <label for="Region">Region</label>
                </div>
                <div class="grid_5 editor-field">
                    
                    <select  id="Region" name="Region">
                        <option value="">Please Select</option>
                        <option value="AL">Alabama</option>
                        <option value="AK">Alaska</option>
                        <option value="AS">American Samoa</option>
                        <option value="AZ">Arizona</option>
        ...

CSS

body{min-width:1008px;max-width:1100px}
.container_16{margin-left:auto;margin-right:auto;width:1000px}
.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12,.grid_13,.grid_14,.grid_15,.grid_16{display:inline;float:left;position:relative;margin-left:10px;margin-right:10px}
.push_1,.pull_1,.push_2,.pull_2,.push_3,.pull_3,.push_4,.pull_4,.push_5,.pull_5,.push_6,.pull_6,.push_7,.pull_7,.push_8,.pull_8,.push_9,.pull_9,.push_10,.pull_10,.push_11,.pull_11,.push_12,.pull_12,.push_13,.pull_13,.push_14,.pull_14,.push_15,.pull_15,.push_16,.pull_16{position:relative}
.alpha{margin-left:0}
.omega{margin-right:0}
.container_16 .grid_1{width:40px}
.container_16 .grid_2{width:100px}
.container_16 .grid_3{width:160px}
.container_16 .grid_4{width:220px}
.container_16 .grid_5{width:280px}
.container_16 .grid_6{width:340px}
.container_16 .grid_7{width:400px}
.container_16 .grid_8{width:460px}
.container_16 .grid_9{width:520px}
.container_16 .grid_10{width:580px}
.container_16 .grid_11{width:640px}
.container_16 .grid_12{width:700px}
.container_16 .grid_13{width:760px}
.container_16 .grid_14{width:820px}
.container_16 .grid_15{width:880px}
.container_16 .grid_16{width:940px}
.container_16 .prefix_1{padding-left:60px}
.container_16 .prefix_2{padding-left:120px}
.container_16 .prefix_3{padding-left:180px}
.container_16 .prefix_4{padding-left:240px}
.container_16 .prefix_5{padding-left:300px}
.container_16 .prefix_6{padding-left:360px}
.container_16 .prefix_7{padding-left:420px}
.container_16 .prefix_8{padding-left:480px}
.container_16 .prefix_9{padding-left:540px}
.container_16 .prefix_10{padding-left:600px}
.container_16 .prefix_11{padding-left:660px}
.container_16 .prefix_12{padding-left:720px}
.container_16 .prefix_13{padding-left:780px}
.container_16 .prefix_14{padding-left:840px}
.container_16 .prefix_15{padding-left:900px}
.container_16 .suffix_1{padding-right:60px}
.container_16 .suffix_2{padding-right:120px}
.container_16...

JavaScript

var __SHIFT_KEY_DOWN = false;
var __TAB_KEY_DOWN = false;

$(document).keydown(function (e) {
    if (e.which == 16) {
        __SHIFT_KEY_DOWN = true;
    }
    if (e.which == 9) {
        __TAB_KEY_DOWN = true;
    }
});

$(document).keyup(function (e) {
    if (e.which == 16) {
        __SHIFT_KEY_DOWN = false;
    }
    if (e.which == 9) {
        __TAB_KEY_DOWN = false;
    }
});


var parentRowClass = '.editor-row';

var formEditRows = $('.grid_8' + ' ' + parentRowClass);

var clearGrid960 = "<div class='clear'></div>";

formEditRows.each(function() {
   $(this).after(clearGrid960);
});

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

// research for inputs now that dom has been changed by adding required icons
        formInputs = $('form input, textarea, select');
        // add background when control gets focus
        formInputs.focus(function () {
            formEditRows.parents('form').find('.curFocus').removeClass('curFocus');
            var x = $(this).parents('.single-focus');
            if (0 === x.length) {
                x = $(this).parents(parentRowClass);
            }

            x.addClass('curFocus');

            if ($(this).is('textarea')) {
                dcfFrom.updateRemainingCharCnt(this);
            }

            // HACK to fix css problem with IE7 
            if ($.browser.msie && parseInt($.browser.version, 10) < 9) {
                $(x).find(".remaingCharacters").each(function () {
                    var x1 = this;
                    $(x1).fadeIn(300);
                });
            }

        });

formInputs.mouseMove(funciton(e){
                     e.stopPropagation();
                     }

        formInputs.keydown(function (e) {
            if (e.which != 9)
                return;
            $(this).parents('.curFocus').removeClass('curFocus');
            // HACK to fix css problem with IE7 
            if ($.browser.msie && parseInt($.browser.version, 10) < 9) {
   ...