JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Myapp</title>
    <link rel="stylesheet" type="text/css" href="myapp.css" />
</head>
<body>
    <div id="navbar">
        <center>
            <a href="/">Home</a> |
            <a href="/about">About</a> |
            <a href="/contact">Contact</a>
        </center>
    </div>
    
    <p><br/>
    
    <div id="home" class="page">
        <center><h3>Home Page</h3><center>
    </div>

    <div id="about" class="page">
        <center><h3>About Page</h3><center>
    </div>

    <div id="contact" class="page">
        <center><h3>Contact Page</h3><center>
    </div>

    <script type="text/javascript" src="myapp.js" />
    <script type="text/javascript" src="signals.min.js" />
    <script type="text/javascript" src="crossroads.min.js" />
    <script type="text/javascript" src="hasher.min.js" />
</body>
</html>

CSS

/* myapp.css */


body,
input, select, textarea {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

h1, h2, h3, h4, h5, h6 {
line-height: 1.1;
}

/* BASE LAYOUT */

html {
background-color: #ddd;
background-image: -moz-linear-gradient(center top, #aaa, #ddd);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #aaa), color-stop(1, #ddd));
background-image: linear-gradient(top, #aaa, #ddd);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr = '#aaaaaa', EndColorStr = '#dddddd');
background-repeat: no-repeat;
height: 100%;
/* change the box model to exclude the padding from the calculation of 100% height (IE8+) */
-webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
       box-sizing: border-box;
}

html.no-cssgradients {
background-color: #aaa;
}

.ie6 html {
height: 100%;
}

html * {
margin: 0;
}

body {
background: #ffffff;
color: #333333;
margin: 0 auto;
max-width: 960px;
overflow-x: hidden; /* prevents box-shadow causing a horizontal scrollbar in firefox when viewport < 960px wide */
  -moz-box-shadow: 0 0 0.3em #255b17;
-webkit-box-shadow: 0 0 0.3em #255b17;
       box-shadow: 0 0 0.3em #255b17;
}

#grailsLogo {
background-color: #abbf78;
}

/* replace with .no-boxshadow body if you have modernizr available */
.ie6 body,
.ie7 body,
.ie8 body {
border-color: #255b17;
border-style: solid;
border-width: 0 1px;
}

.ie6 body {
height: 100%;
}

a:link, a:visited, a:hover {
color: #48802c;
}

a:hover, a:active {
outline: none; /* prevents outline in webkit on active links but retains it for tab focus */
}

h1 {
color: #48802c;
font-weight: normal;
font-size: 1.25em;
margin: 0.8em 0 0.3em 0;
}

ul {
padding: 0;
}

img {
border: 0;
}

/* GENERAL */

#grailsLogo a {
display: inline-block;
margin: 1em;
}

.content {
}

.content h1 {
border-bottom: 1px solid #CCCCCC;
margin: 0.8em 1em 0.3em;
padding: 0 0.25em;
}

.scaffold-list h1 {
border:...

JavaScript

// myapp.js

// GLOBALS.
var HOME_PAGE_DIV_NAME = "home";
var HOME_PAGE_CTX_PATH = "/";
var ABOUT_PAGE_DIV_NAME = "about";
var ABOUT_PAGE_CTX_PATH = HOME_PAGE_CTX_PATH + ABOUT_PAGE_DIV_NAME;
var CONTACT_PAGE_DIV_NAME = "contact";
var CONTACT_PAGE_CTX_PATH = HOME_PAGE_CTX_PATH + CONTACT_PAGE_DIV_NAME;

var PAGES = [
    HOME_PAGE_DIV_NAME,
    ABOUT_PAGE_DIV_NAME,
    CONTACT_PAGE_DIV_NAME,
];

// INITIALIZE THE APPLICATION.
init();

// FUNCTIONS.
function addRoute(pageName, ctxPath) {
    crossroads.addRoute(
        ctxPath,
        function() {
            navigate(pageName);
        }
    );
}

function init() {
    // Crossroads Config.
    addRoute(HOME_PAGE_DIV_NAME, HOME_PAGE_CTX_PATH);
    addRoute(ABOUT_PAGE_DIV_NAME, ABOUT_PAGE_CTX_PATH);
    addRoute(CONTACT_PAGE_DIV_NAME, CONTACT_PAGE_CTX_PATH);
    
    crossroads.routed.add(console.log, console);
    crossroads.parse(document.location.pathname);

    // Hasher Config.
    hasher.intialized.add(parseHash);
    hasher.changed.add(parseHash);
    hasher.init();

    hasher.setHash(HOME_PAGE_CTX_PATH);
}

function navigate(pageToShow) {
    $("#" + pageToShow).show();
        for(var page in PAGES) {
            if(page != pageToShow) {
                $("#" + page).hide();
            }
        }
}

function parseHash(newHash, oldHash) {
    crossroads.parse(newHash);
}