JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">
This is the content area. It will have lots of vertical space so that it can scroll.<br>
<br>
a<br><br>
b<br><br>
c<br><br>
d<br><br>
e<br><br>
f<br><br>
g<br><br>
h<br><br>
i<br><br>
j<br><br>
k<br><br>
l<br><br>
m<br><br>
n<br><br>
o<br><br>
p<br><br>
</div>
<div id="footer">
.
</div>

CSS

#content {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 90%;
    overflow: scroll;
}
#footer {
    background: red;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 20%;
    height: 60%;
    float:right;
}