JSFiddle - React, Tailwind, and code Playground

HTML

<style type="text/css">
.scroll{
height:100%;
overflow:auto;
}
html,body {
    height: 100%;
    margin: 0;
    padding: 0;
}
table {
    width: 100%;
    height: 100%;
    background: blue;
}
tr {
    border: 1px solid yellow;
}

.header {
    height: 20px;
    background: red;
}
.footer {
    height: 20px;
    background: green;
}
    
</style>
<table>
<tr>
    <td class="header"><div class="header">Header</div></td>
</tr>
<tr>
    <td>
    <div class="scroll"><pre>
        1
        2
        3
        4
        5
        6
        7
        10
        2
3
4
5
6
7
8
9
20
1
2
3
4
5
6
7
8
9
30
    </pre></div>
    </td>
</tr>
<tr>
    <td class="footer">
        <div class="footer">Footer</div>
    </td>
</tr>
</table>