JSFiddle - React, Tailwind, and code Playground

by stchangg

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css">
<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container-fluid">
            <a class="brand" href="/">Lessons</a>
            <div class="btn-group pull-right">
                <a class="btn disabled" href="#">
                    <span class="icon-user"></span>
                    User
                </a>
                <a class="btn disabled dropdown-toggle" data-toggle="dropdown" href="#">
                    <span class="icon-chevron-down"></span>
                </a>
            </div>
        </div>
    </div>
</div>
<div class="container">
<div class="row">
    <div class="span12" id="briefing">
        <h1>Mission Briefing</h1>
    </div>
</div>
<div class="row">
    <div class="span4" id="sidebar">
        <h1>Sidebar</h1>
    </div>
    <div class="span8" id="main">
        <h1>Main content</h1>
    </div>
    <div class="span4" id="extra">
        <h1>Extra content</h1>
    </div>
</div>
</div>

CSS

body {
    margin-top: 40px;
    margin-bottom: 40px;
}

#briefing {
    background: #eee;
    height: 800px;
    margin-top: 40px;
    margin-bottom: 40px;
}

#sidebar, #main {
    background: #eee;
    height: 800px;
}

#extra {
    display: none;
}