JSFiddle - React, Tailwind, and code Playground

HTML

<body>

	<div id="pageWrapper">
		<header>
		
		</header>
		
		<div id="mainWrapper">
			<div id="navigation">
			
			</div>
			
			<div id="content">
                <p>Test Content</p>
			</div>
		</div>
		
		<footer>
		
		</footer>
	</div>
</body>

CSS

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

html, body {
height: 100%;
width; 100%;
}

#pageWrapper {
height: 100%;
}

header{
height: 50px;
width: 100%;
background-color:yellow;
}

footer{
height: 50px;
width: 100%;
background-color:blue;
}

#mainWrapper{
width:100%;
height: 100%;
background-color:black;
}

#mainWrapper #navigation {
width: 250px;
height: 100%;
background-color:orange;
float: left;
}

#mainWrapper #content {
height: 100%;
width: 100%;
background-color: green;
}