JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div id="under" onclick="alert('under!')">
   I'm underneath
   <h1>One</h1>
   <h1>Two</h1>
   <h1>Three</h1>
   <h1>Four</h1>
   <h1>Five</h1>
   <h1>Six</h1>
   <h1>Seven</h1>
   <h1>Eight</h1>
   <h1>Nine</h1>
   <h1>Ten</h1>
   <h1>Eleven</h1>
   <h1>Twelve</h1>
   <h1>One</h1>
   <h1>Two</h1>
   <h1>Three</h1>
   <h1>Four</h1>
   <h1>Five</h1>
   <h1>Six</h1>
   <h1>Seven</h1>
   <h1>Eight</h1>
   <h1>Nine</h1>
   <h1>Ten</h1>
   <h1>Eleven</h1>
   <h1>Twelve</h1>
   <h1>One</h1>
   <h1>Two</h1>
   <h1>Three</h1>
   <h1>Four</h1>
   <h1>Five</h1>
   <h1>Six</h1>
   <h1>Seven</h1>
   <h1>Eight</h1>
   <h1>Nine</h1>
   <h1>Ten</h1>
   <h1>Eleven</h1>
   <h1>Twelve</h1>
  </div>
  <div id="ontop" onclick="alert('ontop!')">I'm on top</div>
 </body>

CSS

#under, #ontop
 {
 	position: absolute;
 }
 
 #ontop
 {
 	border: 1px solid red;
 	color: red;
 	height: 80%;
 	margin: 5% 10% 5% 10%;
 	pointer-events: none;
 	width: 80%;
 }
 
 #under
 {
 	border: 1px solid green;
 	color: green;
 	height: 60%;
 	margin: 10% 20% 10% 20%;
 	overflow-y: scroll;
 	width: 60%;
 }