JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
<div>
Test
<br>
Test
<br>
Test
<br>
Test
<br>
Test
<br>
Test
<br>
Test
<br>
Test
<br>
Test
<br>
Test
<br>
Test
<br>
Test
<br>
Test
<br>
Test
<br>
Test
<br>
Test
<br>
Test
<br>
Test
<br>
Test
<br>
Test
<br>
Test
</div>
<div class="cover">

</div>
</div>

CSS

.main
{
  height:300px;  
  width:150px;
  background:red;
  overflow:auto;
  position:relative;
}

.cover
{
    position:absolute;
    height:100%;  
    width:100%;
    top:0;
    bottom:0;
    background:green;
    opacity:0.5;
}