JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<div>
    <header>Header</header>
    <nav class="breadcrumbing">Breadcrumbing</nav>
    <section class="left_nav">Navigation</section>
    <section class="content">Content</section>
    <footer>Footer</footer>
</div>
</div>

CSS

*{font-size:10px}
html,body{width:100%;margin:0;padding:0;}
body{background-color:#629302}
body>div>div{width:400px;height:100%;margin:0 auto;background-color:#FFF;
position:absolute; top: 0; bottom: 0;}
body>div{
    width: 400px;
    margin: 0 auto;
    height: 0;
    background-color:transparent;
}
body>div>div>header{height:50px;background-color:#9dc155}
body>div>div>nav.breadcrumbing{display:block;height:10px;margin:0;padding:0;}
body>div>div>section.left_nav{width:172px;margin: 8px 20px;float:left;background-color:#cdef88}
body>div>div>section.content{width:168px;float:left;}
body>div>div>footer{padding:19px 19px 22px;background-color: #e58b04;clear:left; position:absolute; bottom: 0; width:400px; box-sizing: border-box;}