JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container-main">
		<header class='container-fluid '>
			header
		</header>
		<main class="container-fluid">
			<div class='one container-fluid'>one</div>
			<div class='two container-fluid'>two</div>
			<div class='three container-fluid'>three</div>
		</main>
		<footer class='container-fluid footer'>
			footer
		</footer>
	</div>

CSS

html,body{
	color:#fff;
    height:100%;
}
.container-main{
    position:relative;
	background:#efefef;
	border:1px solid red;
    padding-bottom:20px;
    
}
header,footer{
	border:1px solid green;
	background:#000;
}
.footer{
    position:absolute;
    bottom:0;
    width:100%;
}
main{
    position:relative;
	background:#e1e1e3;
	padding:10px;
	border:1px solid blue;
    height:100%;
}
.one, .two, .three{
    height:300px;
    position:relative;
}
.one{
	background:#888;

}
.two{
	background:#666;

}
.three{
	background:#555;
}