JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
    <div class="right">
        <div class="top_right">
            <table>
                <tr>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                   ...

CSS

html, body {
    height:100%;
}
.main {
    position: relative;
    height: 600px;
    background-color: lightblue;
    margin: 50px 50px;
}
.right {
    height: 100%;
    width: 800px;
    overflow: scroll;
}
.top_right {
    z-index: 2;
    position: absolute; 
    top: 0px;
    left: 0px;
    width: 9000px;
    background-color:purple;
    overflow-x: hidden;
    overflow-y: hidden;
}
.bottom_right {
    background-color: pink;
    position: relative;
    top: 100px;
    left: 0px;
    height: 1000px;
    width: 9000px;
    overflow-x:hidden;
    overflow-y:hidden;
}