JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">aaaaa</div>
<div class="main">
    content<br />
    content<br />
    content<br />
    content<br />
    content<br />
    content<br />
    content<br />
    content<br />
    content<br />
    content<br />
    content<br />
    content<br />
    content<br />
    content<br />
    content<br />
    content<br />
    content<br />
    content<br />
    content<br />
    content<br />
    content<br />
    content1111<br />
</div>
<div class="footer">bbbbbbbbb</div>

CSS

.header{
position: fixed;
background-color: #f00;
height: 100px;
    width:100%;
}
.main{
background-color: #ff0;
    padding-top: 100px;
    padding-bottom: 120px;
}
.footer{
position: fixed;
bottom: 0;
background-color: #f0f;
height: 120px;
    width:100%;}