JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>
    
<head>
<meta charset="utf-8">
<title>Footer</title>
</head>
    
<body>
	<div id="main">
		<div id="content">text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>the end</div>
	</div>
	<div id="footer">Footer</div>
</body>
</html>

CSS

html{
	height:100%;
}
body{
	height:100%;
	margin:auto;
}
#main{
	min-height:100%;
	width:600px;
	margin:0 auto -150px;
	background:#cfc;
}
#content{
	padding: 0 0 150px;
	overflow:hidden;
}
#footer{
	height:150px;
	width:600px;
	margin:auto;
	background:#fcc;
}