JSFiddle - React, Tailwind, and code Playground

HTML

<body>

	<div id="wrapper">
		
		<div id="header">
            <div id="nav"></div>
            <div id="content_push" style="width: 100%; height: 50px;"></div> <!-- makes sure the first content doesn't dissapear beneeth the nav>
		</div><!-- #header -->
		
		<div id="content">
            Copy this to add content<br><br><br><br>
            Copy this to add content<br><br><br><br>
            Copy this to add content<br><br><br><br>
            Copy this to add content<br><br><br><br>
		</div><!-- #content -->
		
		<div id="footer">
		</div><!-- #footer -->
		
	</div><!-- #wrapper -->
	
</body>

CSS

html,
body {
	margin:0;
	padding:0;
	height:100%;
}
#wrapper {
	min-height:100%;
	position:relative;
}
#header {
	background:#ededed;
	padding:0px;
    
}
#nav{
    width: 100%;
    height: 50px;
    position: fixed;
    background-color: green;
}
#content {
	padding-bottom:100px; /* Height of the footer element */
}
#footer {
	background:#ffab62;
	width:100%;
	height:100px;
	position:absolute;
	bottom:0;
	left:0;
}