JSFiddle - React, Tailwind, and code Playground

by mrmills

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css">
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
    <!-- Always force latest IE rendering engine & Chrome Frame -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><title>
    
title
 
 
 
</title>
    <link href="jquery-ui-1.8.5.custom.css" rel="stylesheet" type="text/css" />
    <link href="ui.jqgrid.css" rel="stylesheet" type="text/css" />
    <link href="common.css" rel="stylesheet" type="text/css" />
    <link href="site.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
    <div id="wrapper">
        <div id="header">
            <div class="content">
                <div id="menucontainer">
                    <input id="q" class="useTitleAsPlaceholder" accesskey="4" title="blah" type="text" size="20" />
                </div>
 
                <h1>
                    Foo &nbsp; &nbsp; &nbsp;
                    <a class="norm" href="#">Bar</a> &middot;
                    <a class="norm" href="#">Baz</a> &middot;
                    <a class="norm" href="#">Quux</a> &middot;
                    <a class="norm" href="#">Do</a>
                </h1>
                <div class="clear"></div>
            </div>
        </div>
 
        <div id="main">
            <div class="content">
                <div id="sidebar">
                    
                    <div>
                        <ul>
                        </ul>
                    </div>
                    
                </div>
                <div id="nonsidebar">
                    
 
 
    <div style="float: right; text-align: right">
        <b>blah</b>
        <div style="font-size: 75%">
            blah<br />
            blah<br />
            
           ...

CSS

/* Fonts and sizes */
body, button, input, select, table, td, textarea { font-size: 10pt; color: #333; font-family: Verdana, Arial, sans-serif }
h1, h2, h3 { font-family: Calibri }

/* General dimensions */
/*html, body { height: 100% }*/
div, input, label, select, textarea { -moz-box-sizing: border-box; box-sizing: border-box }  /* Use what we really mean when we talk about width etc. */
body, h1, h2, h3, h4, h5, h6, ul { margin: 0; padding: 0 }
h2 { margin-bottom: 0.2em }
div.content { width: 995px; margin: 0 auto; padding: 0; position: relative }

div#main { background-color: white; padding: 1em 0 0 }

/* Calendar */
table.ui-datepicker-calendar { table-layout: fixed }

/* Utility */
.clear { clear: both }
input.datepicker { background-image: url(images/calendar.png); background-repeat: no-repeat; background-position: 99.44% center }
.hidden { display: none }
.inline-silk { vertical-align: bottom }
p, div.para { margin: 0.5em 0 }
.placeholder { color: #ccc; font-style: italic }
.stack { float: left; margin: 0 2em 0.5em 0 }


/* Fonts and sizes */
a.norm { color: #333; text-decoration: none }
a.norm:hover { color: #3084ca }

/* General dimensions */
#sidebar { float: left; width: 185px }
#nonsidebar { margin-left: 200px }

/* Main page divisions and dimensions */
div#header { background: #333; background: -moz-linear-gradient(0deg, #222, #444); color: #ddd; padding: 0.5em 0; border-top: 1px solid #333; border-bottom: 1px solid #333; -moz-box-shadow: #888 0 2px 2px }
div#footer { color: #ddd; padding: 1em 0 0 }

/* Header */
div#header h1 { font-size: 150%; text-shadow: black 1px 1px 1px }
div#header a { color: #fff; border: 1px solid transparent }
div#header a.ui-state-active { color: #333; text-shadow: none; font-weight: bold }
div#header a:hover { color: #3084ca }
div#menucontainer { float: right }
div#menucontainer input { padding: 4px; -moz-border-radius: 4px; border-radius: 4px; border: 1px solid #333; -moz-box-shadow: 1px 1px 2px #888 inset;...

JavaScript

/* 
* Placeholder plugin for jQuery
* @author Daniel Stocks (http://webcloud.se)
*/
(function ($) {
    function Placeholder(input) {
        this.input = input;
        if (input.attr('type') == 'password') {
            this.handlePassword();
        }
        // Prevent placeholder values from submitting
        $(input[0].form).submit(function () {
            if (input.hasClass('placeholder')) {
                input[0].value = '';
            }
        });
    }
    Placeholder.prototype = {
        show: function (loading) {
            // FF and IE saves values when you refresh the page. If the user refreshes the page with 
            // the placeholders showing they will be the default values and the input fields won't be empty.

            if (this.input[0].value === '' || (loading && this.valueIsPlaceholder())) {
                if (this.isPassword) {
                    try {
                        this.input[0].setAttribute('type', 'text');
                    } catch (e) {
                        this.input.before(this.fakePassword.show()).hide();
                    }
                }
                this.input.addClass('placeholder');
                this.input[0].value = this.input.attr('placeholder');
            }
        },
        hide: function () {
            if (this.valueIsPlaceholder() && this.input.hasClass('placeholder')) {
                if (this.isPassword) {
                    try {
                        this.input[0].setAttribute('type', 'password');
                    } catch (e) { }
                    // Restore focus for Opera and IE
                    this.input.show();
                    this.input[0].focus();
                }
                this.input[0].value = '';
                this.input.removeClass('placeholder');
            }
        },
        valueIsPlaceholder: function () {
            return this.input[0].value == this.input.attr('placeholder');
        },
        handlePassword: function () {

   ...