JSFiddle - React, Tailwind, and code Playground

by skelly

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<!DOCTYPE html>
<!--[if lt IE 7]>
    <html class="no-js lt-ie9 lt-ie8 lt-ie7">
    <![endif]-->
    <!--[if IE 7]>
        <html class="no-js lt-ie9 lt-ie8">
        <![endif]-->
        <!--[if IE 8]>
            <html class="no-js lt-ie9">
            <![endif]-->
            <!--[if gt IE 8]>
                <!-->
                <html class="no-js">
                <!--<![endif]-->

                <body>
                    <div id="wrapper" >
                        <!-- Header -->
                        <div class="container-fluid no-padding header">
                            <div class="row-fluid fill-height">
                                <!-- Header Left -->
                                <div class="span2">
                                    <p class="center-text">Left</p>
                                </div>
                                <!-- Header Middle -->
                                <div class="span8">
                                    <p class="center-text">Middle</p>
                                </div>
                                <!-- Header Right -->
                                <div class="span2">
                                    <p class="center-text">Right</p>
                                </div>
                            </div>
                        </div>
                        <!-- Content Wrapper -->
                        <div class="container-fluid no-padding fill fill-height" style="background-color:#ddd;">
                            <div class="row-fluid">
                                <div class="span2">
                                    <div class="well sidebar-nav-fixed no-padding">
                                        <ul id="nav">
                                            <li><a href="#">Item 1</a>

                                                <ul>
                                      ...

CSS

/* ==========================================================================
   HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
   ========================================================================== */
 html, button, input, select, textarea {
    color: #222;
    height: 100%;
}
body {
    font-size: 1em;
    line-height: 1.4;
    height: 100%;
    width:100%;
    *position: absolute;
}
::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}
::selection {
    background: #b3d4fc;
    text-shadow: none;
}
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}
img {
    vertical-align: middle;
}
fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}
textarea {
    resize: vertical;
}
.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}
/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/*  =======
    Helpers
    ======= */
 .no-padding {
    padding: 0;
}
.fill-height {
    min-height: 100% !important;
    height: 100% !important;
}
.center-text {
    text-align: center;
    vertical-align: middle;
}
/*  =======
    Wrapper 
    ======= */
 #wrapper {
    min-height: 100% !important;
    height: 100% !important;
    margin: 0 auto -33px;
}
#footer {
    border-top: 1px solid #333;
    height: 30px;
}
.contain {
    padding-bottom: 30px;
}
/*  =======
    Header 
    ======= */
 .header {
    height: 90px;
}
.header_logo {
    padding-top: 10px;
}
/*  ==========
    Navigation
    ========== */
 .sidebar {
    position: fixed;
    width: 200px;
    top: 90px;
}
#navbar {
    float: left;
    width: 15%;
    height: 85%;
    background-color: #ccc;
}
#nav {
    float: left;
    width: 100%;
    border-top: 1px solid #999;
    border-right: 1px solid #999;
    border-left: 1px...

JavaScript

$(document).ready(function () {
    $('#nav > li > a').click(function () {
        if ($(this).attr('class') != 'active') {
            $('#nav li ul').slideUp();
            $(this).next().slideToggle();
            $('#nav li a').removeClass('active');
            $(this).addClass('active');
        }
    });
});