JSFiddle - React, Tailwind, and code Playground

by AJBweb1986

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.1/modernizr.min.js"></script>
<div id="main_container">

<header id="main_header"><h1>Header</h1></header>

<nav id="main_nav">

<ul>

<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
<li>Test 5</li>

</ul>

</nav>

<section id="content">
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</section>

<section id="sidebar">
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</section>

<footer id="main_footer">Footer</footer>

</div>

CSS

#main_container {
    
    width: 980px;
    margin-right: auto;
    margin-left: auto;
    outline: solid 1px #000;
}

section#content {
    width: 72%;
    float: left;
    outline: solid 1px #000;
    margin-bottom: 20px;
}

section#sidebar {
    width: 25%;
    float: right;
    outline: solid 1px #000;
    margin-bottom: 20px;    
}

footer#main_footer {
    
outline: solid 1px #000;
clear: both;    
    
}

header#main_header {
    
    height: 200px;
    outline: solid 1px #000;
    
}