JSFiddle - React, Tailwind, and code Playground

HTML

<header>
    <p>Company</p>
</header>

<div class="fixed-row-one"></div>

<div class="fixed-row-two"></div>

<div class="fixed-stage-left">
    
    <div class="scrollable">
        
        <table cellpadding="0" cellspacing="0">
            
            <tr>
                <td>First</td>
                <td>Second</td>
                <td>Third</td>
                <td>Fourth</td>
            </tr>
            
            <tr>
                <td>First</td>
                <td>Second</td>
                <td>Third</td>
                <td>Fourth</td>
            </tr>
            
            <tr>
                <td>First</td>
                <td>Second</td>
                <td>Third</td>
                <td>Fourth</td>
            </tr>
            
            <tr>
                <td>First</td>
                <td>Second</td>
                <td>Third</td>
                <td>Fourth</td>
            </tr>
            
            <tr>
                <td>First</td>
                <td>Second</td>
                <td>Third</td>
                <td>Fourth</td>
            </tr>
            
            <tr>
                <td>First</td>
                <td>Second</td>
                <td>Third</td>
                <td>Fourth</td>
            </tr>
            
            <tr>
                <td>First</td>
                <td>Second</td>
                <td>Third</td>
                <td>Fourth</td>
            </tr>
            
            <tr>
                <td>First</td>
                <td>Second</td>
                <td>Third</td>
                <td>Fourth</td>
            </tr>
            
            <tr>
                <td>First</td>
                <td>Second</td>
                <td>Third</td>
                <td>Fourth</td>
            </tr>
            
            <tr>
                <td>First</td>
                <td>Second</td>
                <td>Third</td>
                <td>Fourth</td>
            </tr>
            
           ...

CSS

body {
    margin:0;
    padding: 0    
}

header {
    width: 100%;
    height: 50px;
    position: fixed;
    background: black;
    color: white;
}

.fixed-row-one {
    width: 100%;
    height: 50px;
    position: fixed;
    top: 50px;
    background: #AAA;
    color: white;
}

.fixed-row-two {
    width: 100%;
    height: 50px;
    position: fixed;
    top: 100px;
    background: #e51837;
    color: white;
}

.fixed-stage-left {
    width: 50%;
    height: 100%;
    position: fixed;
    overflow: hidden;
    top: 150px;
    left: 0;
    background: #f1f1f1;
    color: #000;
}

.scrollable {
    width: 100%;
    height: 100%;
    background: #262626;
    overflow: auto;
    position: absolute;
}

.scrollable table tr{
    width: 100%;
    height: 50px;
    color: white;
    border-bottom: 1px solid #CCC;
}

.fixed-stage-right {
    width: 50%;
    height: 100%;
    position: fixed;
    overflow: hidden;
    top: 150px;
    right: 0;
    background: #0cf;
    color: #000;
}