JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<nav></nav>
	<main>
        <p>123</p><p>123</p>
        <p>123</p><p>123</p>
<p>123</p>        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>3</p>
	</main>
	<footer></footer>
</body>

CSS

*{
    margin: 0;
    padding: 0;
}
html,body {
    height:100%;
}
nav {
	width: 20%;
	background: #383737;
	height: 100%;
	overflow: auto;
	float: left;
	z-index: 20;
	position: fixed;
	left: 0px;
	min-height: 600px;
}
main {
	background: blue;
	float: right;
	width: 80%;
	position: relative;
	min-height: 100%;
    padding-bottom:70px;
    box-sizing:border-box;
}
footer {
	margin-left: 20%;
	height: 70px;
	position: fixed;
	left: 0px;
	bottom: 0px;
	width: 80%;
	z-index: 15;
	background: yellow;
    clear:both;
}