JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset=utf-8>
<title>Sample HTML5 Structure</title>
</head>
<body>
<div id="container">
    <header>
     <h1>Sample HTML5 Structure</h1>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
            </ul>
        </nav>
    </header>
    <section>
     <hgroup>
         <h1 id="main">Main Section</h1>
            <h2>This is a sample HTML5 Page</h2>
        </hgroup>
     <article>
         <p>This is the content for the first article</p>
        </article>
        <article>
         <p>This is the content for the second article</p>
        </article>
    </section>
    <footer>
     <p>This is the Footer</p>
    </footer>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
</body>
</html>

CSS

header, nav, article, footer, address, section {
  display: block;
 }
 #container {
  width:900px;
  margin:auto;
  background-color:white;
 }
 header {
  background-color:#666;
 }
 nav li {
  display:inline;
  padding-right:1em;
 }
 nav a {
  color:white;
  text-decoration:none; 
 }
 nav a:hover {
  text-decoration:overline; 
 }
 h1, h2 {
  margin:0px;
  font-size:1.5em;
 }
 h2 {
  font-size:1em;
 }
 footer {
  background-color:#999;
  text-align:center;
 }

JavaScript

function Sandbox() {
    // turning arguments into an array
    var args = Array.prototype.slice.call(arguments),
            // the last argument is the callback
            callback = args.pop(),
            // modules can be passed as an array or as individual parameters
            modules = (args[0] && "string" === typeof args[0]) ? args : args[0],
            i;
            
    // make sure the function is called
    // as a constructor
    if (!(this instanceof Sandbox)) {
        return new Sandbox(modules, callback);
    }
    
    // add properties to 'this' as needed:
    this.a = 1;
    this.b = 2;
    
    // now add modules to the core 'this' object
    // no modules or "*" both mean "use all modules"
    if (!modules || '*' === modules) {
        modules = [];
        for (i in Sandbox.modules) {
            if (Sandbox.modules.hasOwnProperty(i)) {
                modules.push(i);
            }
        }
    }
    
    // initialize the required modules
    for (i = 0; i < modules.length; i += 1) {
        Sandbox.modules[modules[i]](this);
    }
    
    // call the callback
    callback(this);
    
    // any prototype properties as needed
    Sandbox.prototype = {
        name: "Kerygma Sandbox",
        version: "1.0",
        getName: function() {
            return this.name;
        }
    }
};

Sandbox.modules = {};

Sandbox.modules.color = function (box) {
    // private
    var initialColor = $('#main').css('color');    
    
    // set a red color
    box.setMainRed = function() {
        $('#main').css('color','red');
        return false;
    },
    
    // get the current color
    box.getInitialColor = function () {
        return initialColor;
    };
}

// another module
Sandbox.modules.style = function (box) {
    // set a red color
    box.setStyle = function() {
        $('#main').css('font-style','italic');
        return false;
    };
}

// page ready
$.ready(
    Sandbox(['color', 'style'], function (box) {
       ...