JSFiddle - React, Tailwind, and code Playground

by whoiskb

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
    <!-- Begin Header -->
    <div class="header">
            <a class="brand" href="#">Logo</a>
            <div class="btn-toolbar">
                <div class="btn-group">
                    <button class="btn">Home</button>
                    <button class="btn">Cases</button>
                </div>
                <div class="btn-group">
                    <button class="btn">Test Plans</button>
                    <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                    <ul class="dropdown-menu">
                        <li>Kevin Test Plan</li>
                        <li>Kevin UL Test Plan</li>
                        <li>Don Shared Test Plan</li>
                    </ul>
                </div>
                <div class="accountDetails">
                    <p>Logged in as: IT\kblakeley</p>
                    <p>Project: FPM</p>
                </div>
            </div>
    </div>
    <!-- End Header -->
    <!-- Begin Sub-Header -->
    <div class="subHeader">
        <div class="btn-toolbar">
            <div class="btn-group"  data-toggle="buttons-checkbox">
                <button class="btn btn-mini">Item 1</button>
                <button class="btn btn-mini">Item 2</button>
                <button class="btn btn-mini">Item 3</button>
            </div>
        </div>
    </div>
    <!-- End Sub-Header -->
    <div class="content">
        <div class="sideNav">
            <ul>
                <lu>List 1</lu>
                <lu>List 2</lu>
                <lu>List 3</lu>
                <lu>List 4</lu>
                <lu>List 5</lu>
            </ul>
        </div>
        <div class="mainContent">
            <h2>Index</h2>
        </div>
    </div>

CSS

body 
{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    padding-top:125px; /* header.height + subheader.height */
    padding-bottom:20px;  
    padding-left:110px; 
}
.header
{
    position: fixed;
    top: 0;    
    right: 0;
    left: 0;
    z-index: 1030;   
    height:80px;
    background-color:#2d2d2d; 
    border-bottom: 1px solid black;
    padding-left: 20px;
    padding-right: 20px;    
}

.header::before, .header::after {
display: table;
content: "";
}

.header .brand {
float: left;
display: block;
padding: 8px 20px 12px;
margin-left: -20px;
font-size: 20px;
font-weight: 200;
line-height: 1;
color: white;
}

.accountDetails {
  float: right;
  text-align: right;  
}
.accountDetails p
{
  font-size: 16px;
  font-weight: 300;
  color: #999;
}

.subHeader
{
    width: 100%;
    height:45px;
    background-color: #f1f1f1;     
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    padding-left: 20px;
    padding-right: 20px;    
    z-index: 1020; /* 10 less than .navbar-fixed to prevent any overlap */    
    border-bottom: 1px solid #bbc0c4;
}
.content
{
    overflow: hidden; 
    position: absolute;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 20px;    
}
.sideNav
{
    padding: 0;
    position:fixed;
    left:0px;
    top:125px;
    bottom:0px;
    width:100px;  
    background-color: #f1f1f1;   
    border-right: 1px solid #bbc0c4;
    z-index: 1020; /* 10 less than .navbar-fixed to prevent any overlap */    
}
.mainContent
{
}