JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
  <div class="masked-content">This is some text covered by the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the mask</div>

  <div>
    <div class="mask">Some contents above the mask</div>
  </div>
</div>

CSS

.main{
  position: relative;
}
.masked-content {
  height: 150px;
  overflow: auto;
 
}
.mask {
   background-color: rgba(255, 255, 255, 0.7);
  position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    cursor: default;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
     z-index: 1000;
    }