JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="wrapper">
	    <nav></nav>
	    <main>1</main>
    </div>
	<footer></footer>
</body>

CSS

*{
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
}

.wrapper {
    height: 100%;
    min-height: 100%;   
    background: blue;
}

nav {
	width: 20%;
	background: #383737;
	height: 100%;
	overflow: auto;
	float: left;
	z-index: 20;
	position: fixed;
	left: 0px;
	min-height: 600px;
}
main {
	
	float: right;
	width: 80%;
	position: relative;
	height: 100%;
}
footer {
	margin-left: 20%;
	height: 70px;
	position: fixed;
	left: 0px;
	bottom: 0px;
	width: 80%;
	z-index: 15;
	background: yellow;
}