JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">
</div>
<div class="content">
    <div class="row">a
    </div>
    <div class="row">b
    </div>
    <div class="row">c
    </div>
    <div class="row">d
    </div>
</div>
<div class="footer">
</div>

CSS

.header{
    position: fixed;
    left: 0;
    top: 0;
    width: 1000px;
    height: 100px;
    background:  blue;
    z-index: 1;
}
.content{
    position: absolute;
    left: 0;
    top: 100px;
    width: 1000px;
    height: 250px;
    background:  ;
}
.footer{
    position: fixed;
    left: 0;
    top: 350px;
    width: 1000px;
    height: 300px;
    background:  blue;
}
.row{
    position: relative;
    left: 0;
    top: 0;
    width: 800px;
    height: 250px;
    border: purple 1px solid;
    background: gray;
}