JSFiddle - React, Tailwind, and code Playground

HTML

<div id="enableScrolling">
    <p>a</p>
    <p>a</p>
    <p>a</p>
    <p>a</p>    <p>a</p>
    <p>a</p>
    <p>a</p>
    <p>a</p>    <p>a</p>
    <p>a</p>
    <p>a</p>
    <p>a</p>    <p>a</p>
    <p>a</p>
    <p>a</p>
    <p>a</p>    <p>a</p>
    <p>a</p>
    <p>a</p>
    <p>a</p>    <p>a</p>
    <p>a</p>
    <p>a</p>
    <p>a</p>    <p>a</p>
    <p>a</p>
    <p>a</p>
    <p>a</p>    <p>a</p>
    <p>a</p>
    <p>a</p>
    <p>a</p>    <p>a</p>
    <p>a</p>
    <p>a</p>
    <p>a</p>    <p>a</p>
    <p>a</p>
    <p>a</p>
    <p>a</p>    <p>a</p>
    <p>a</p>
    <p>a</p>
    <p>a</p>    <p>a</p>
    <p>a</p>
    <p>a</p>
    <p>a</p>    <p>a</p>
    <p>a</p>
    <p>a</p>
    <p>a</p>    <p>a</p>
    <p>a</p>
    <p>a</p>
    <p>a</p>    <p>a</p>
    <p>a</p>
    <p>a</p>
    <p>a</p>    <p>a</p>
    <p>a</p>
    <p>a</p>
    <p>a</p>    <p>a</p>
    <p>a</p>
    <p>a</p>
    <p>a</p>    <p>a</p>
    <p>a</p>
    <p>a</p>
    <p>a</p>    <p>a</p>
    <p>a</p>
    <p>a</p>
    <p>a</p>    <p>a</p>
    <p>a</p>
    <p>a</p>
    <p>a</p>    <p>a</p>
    <p>a</p>
    <p>a</p>
    <p>a</p>    <p>a</p>
    <p>a</p>
    <p>a</p>
    <p>a</p>    <p>a</p>
    <p>a</p>
    <p>a</p>
    <p>a</p>    <p>a</p>
    <p>a</p>
    <p>a</p>
    <p>a</p>    <p>a</p>
    <p>a</p>
    <p>a</p>
    <p>a</p>    <p>a</p>
    <p>a</p>
    <p>a</p>
    <p>a</p>
</div>

CSS

#enableScrolling{
position:absolute;
top:0;
height:100%;
width:50%;
overflow-y:scroll;
display:block;
background:red;
}

body{
 position: relative;
        height: 3000px;
        width: 100%;
    background:blue;
}