JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	
		<header>
		</header>
		<div id="maincontent">
		</div>
		<footer>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
		</footer>
	
</body>

CSS

html,body{padding:0; margin:0;}
	
	header{
		background-color:red; 
		height:1.8em;
	}
	#maincontent{
		background-color:black; 
		position:absolute;
		top:1.8em;
        bottom: 50px;
		width:100%;
		
	}
	footer{
	    position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
		background-color:yellow;
		height:50px;
	}