JSFiddle - React, Tailwind, and code Playground

HTML

<div class="page">
    <div class="header">Header</div>
        <div class="content">
            Some Content Here... Some Content Here... Some Content Here... Some Content Here... Some Content Here... Some Content Here... Some Content Here... Some Content Here... Some Content Here... Some Content Here... Some Content Here... Some Content Here... Some Content Here... Some Content Here... Some Content Here... Some Content Here...
 Some Content Here... Some Content Here... Some Content Here... Some Content Here... Some Content Here... Some Content Here... Some Content Here... 
        </div>
        <div class="footer">Footer</div>
</div>

CSS

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
.page{
   min-height:100%;
   position:relative;
}
.header {
   background:#00ff0f;
   padding:30px;
}
.content{
   padding:10px;
   padding-bottom:45px;   /* Height+padding(top and botton) of the footer */
   text-align:justify; 
}
.footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:15px; /* Height of the footer */
   background:#00ff0f;
   padding:10px 0; /*paddingtop+bottom 20*/
}

.content {
   height:100%;
}