JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main_wrapper">
            <div class="top">top</div>
            <div class="center">
                <br>1
                <br>2
                <br>3
                <br>4
                <br>5
                <br>6
                <br>7
                <br>8
                <br>9
                <br>10
                <br>1
                <br>2
                <br>3
                <br>4
                <br>5
                <br>6
                <br>7
                <br>8
                <br>9
                <br>10
                <br>1
                <br>2
                <br>3
                <br>4
                <br>5
                <br>6
                <br>7
                <br>8
                <br>9
                <br>10
                <br>1
                <br>2
                <br>3
                <br>4
                <br>5
                <br>6
                <br>7
                <br>8
                <br>9
                <br>10
                <br>1
                <br>2
                <br>3
                <br>4
                <br>5
                <br>6
                <br>7
                <br>8
                <br>9
                <br>10
                <br>1
                <br>2
                <br>3
                <br>4
                <br>5
                <br>6
                <br>7
                <br>8
                <br>9
                <br>10
                <br>s

            </div>
        </div>

CSS

<style>
            html,body {
                display: flex;
                margin: 0;
                padding: 0;
                height: 100%;
                width: 100%;
            }
            .main_wrapper   {
                margin: auto;
                width: 500px;
                height: 500px;
                background-color: rgba(255, 0, 0, 0.36);
                float: left;
                overflow: hidden;

            }
            .top    {
                position: relative;
                top: 0;
                height: 200px;
                width: 100%;
                background-color: #0eff20;
                overflow: scroll;
                float: left;

            }
            .center {
                padding: 0 0 400px 0;
                height: 100%;
                width: 100%;
                overflow: scroll;
                float: left;



            }


        </style>