JSFiddle - React, Tailwind, and code Playground

by Francis Trujillo

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="wrapper">
  <div id="header" class="header">

    Sample content
  </div>
  <div id="main" class="main">
    <div id="leftSidebar" class="box sidebar">

      <div class="accordion" id="leftMenu">
        <div class="accordion-group">
          <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#leftMenu" href="#">
              <span class="glyphicon glyphicon-home pull-left"></span> Home
            </a>
          </div>
        </div>
        <div class="accordion-group">
          <div class="accordion-heading">
            <a class="accordion-toggle align-middle" data-toggle="collapse" data-parent="#leftMenu" href="#collapseTwo">
              <i class="icon-th"></i> Layout
            </a>
          </div>
          <div id="collapseTwo" class="accordion-body collapse" style="height: 0px; ">
            <div class="accordion-inner">
              <ul>
                <li>This is one</li>
                <li>This is two</li>
                <li>This is Three</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="accordion-group">
          <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#leftMenu" href="#collapseThree">
              <i class="icon-th-list"></i> UI Components
            </a>
          </div>
          <div id="collapseThree" class="accordion-body collapse" style="height: 0px; ">
            <div class="accordion-inner">
              <ul>
                <li>This is one</li>
               ...

CSS

* {
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
}

html,
body {
  height: 100%;
  background-color: #aaccff;
}

div {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

h1 {
  background-color: #ff0000;
}
/*
 #####   #           #      #####    #####   ###   #####   
#     #  #          # #    #     #  #     #   #   #     #  
#        #         #   #   #        #         #   #        
#        #        #     #   #####    #####    #   #        
#        #        #######        #        #   #   #        
#     #  #        #     #  #     #  #     #   #   #     #  
 #####   #######  #     #   #####    #####   ###   #####   


#           #     #     #  #######  #     #  #######  
#          # #     #   #   #     #  #     #     #     
#         #   #     # #    #     #  #     #     #     
#        #     #     #     #     #  #     #     #     
#        #######     #     #     #  #     #     #     
#        #     #     #     #     #  #     #     #     
#######  #     #     #     #######   #####      #     


 #####    #####    #####   
#     #  #     #  #     #  
#        #        #        
#         #####    #####   
#              #        #  
#     #  #     #  #     #  
 #####    #####    #####   
*/

.wrapper {
  height: 100%;
  display: table;
  width: 100%;
  text-align: left;
}

.header {
  /* top right bottom left*/
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  display: table-row;
  height: 1px;
  background-color: #aaaaaa;
  height: 75px;
}

.main {
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  height: 100%;
  display: table;
  width: 100%;
}

.box {
  display: table-cell;
  veritcal-align: middle;
  border: 1px;
  border-style: solid;
  border-collapse: collapse;
}

.sidebar {
  /* top right bottom left*/
  margin: 0px 0px 0px 0px;
  padding: 0px 10px 0px 10px;
  width: 150px;
  background-color: #cccccc;
}

.content {
  /* top right bottom left*/
  margin: 0px 0px 0px 0px;
  padding:...