JSFiddle - React, Tailwind, and code Playground

by carbontype

HTML

<div class="contain">
<div class="header">header</div>
<div class="content">
    <div class="data">hello 123</div>
    <div class="footer">footer</div>
</div>

CSS

*{box-sizing:border-box;}
html, body{height:100%; margin:0px; padding:0px;}
.contain{width:100%; height:100%;}
.header{height:50px; width:100%; background:red; z-index:10;}
.content{height:100%; position:relative; background:green; min-height:790px;}
.content .data{padding:10px;}
.content .footer{position:absolute; bottom:0px; left:0px; width:100%; background:pink;}