JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
		
		<div id="header">
            Header is here
		</div><!-- #header -->
		
		<div id="content">
            <p>
            Content is here
            </p>
            <p>
            Content is here
            </p>
            <p>
            Content is here
            </p>
            <p>
            Content is here
            </p>
            <p>
            Content is here
            </p>
            <p>
            Content is here
            </p>
            <p>
            Content is here
            </p>
            <p>
            Content is here
            </p>
            <p>
            Content is here
            </p>
            <p>
            Content is here
            </p>
		</div><!-- #content -->
		
		<div id="footer">
            Footer is here
		</div><!-- #footer -->
		
	</div><!-- #wrapper -->

CSS

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