JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<div class="wrap">
		<header>header</header>
		<nav>navigation</nav>
		<aside>sidemenu</aside>
		<article>
			<section>
				<p>article</p>
			</section>
		</article>
	</div>
  <footer>footer</footer>
</body>

CSS

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

html, body {
	height: 100%;
}

footer, nav, header, section, aside, article 
{
	display: block;
}

body 
{
	background: #fff;
	color: #000;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 100%;
}

.wrap
{
	min-height: 100%;
	margin-bottom: -150px; 
} 

.wrap:after 
{
	content: "";
	display: block;
}

footer, .wrap:after 
{
	height: 150px;
}

footer
{
	background: #838283;
}

header {
	background-color: #838283;
	height: 50px;
}
 
nav {
	background: #999;
}
 
aside {
	background: #666;
	float: left;
	width: 200px;
}
 
article {
	background: #d2d0d2;      
}