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

var APP = APP || {};

// namespace function
APP.namespace = function (nsString) {
    var parts = nsString.split('.'),
            parent = APP,
            i;
            
    // strip redundant leading global
    if ("APP" === parts[0]) {
        parts = parts.slice(1);
    }
    
    for (i = 0; i < parts.length; i += 1) {
        // create a property if it doesn't exist
        if ("undefined" === typeof parent[parts[i]]) {
            parent[parts[i]] = {};
        }
        parent = parent[parts[i]];
    }
    return parent;
}

// constructors
APP.namespace('modules.Color');

// immediate function
APP.modules.Color = (function () {
    var currentColor = $('#main').css('color'),    
    // set a red color
    setMainRed = function() {
        $('#main').css('color','red');
        return false;
    },
    // get the current color
    getCurrentColor = function () {
        return currentColor;
    };
    
    // revealing module pattern
    return {
        setMainRed: setMainRed,
        getCurrentColor: getCurrentColor
    };
}());

var doSomething = function () {
    var color = APP.modules.Color;
    
    color.setMainRed();
    console.log(color.currentColor);
    console.log(color.getCurrentColor());

    return false;
}

// page ready
$.ready(
    doSomething()
);