JSFiddle - React, Tailwind, and code Playground

by justincook

HTML

<div id="header">Header</div>
<div id="main">
  <div id="nav">
    <div class="wrapper">Nav</div>
  </div>
  <div id="content">
    <div class="wrapper">Content</div>
  </div>
</div>
<div id="footer">Footer</div>

CSS

html, body{height:100%; margin:0; padding: 0; background:#ccc;}
#header{ background: #0cc; height:50px; position: absolute; width:100%;}
#main, #content, #nav{ width:100%; height:100%;}
#content{ background: #555; width:75%; float:left;}
#nav{ background: transparent; width:25%; float:left;}
.wrapper{padding: 50px 15px;}
#footer{background: #fcc;  height: 50px; position: fixed; bottom: 0; width: 100%;}