JSFiddle - React, Tailwind, and code Playground

by Praveen Reghunath

HTML

<div class="root">
  <div class="overlay">
  </div>
  <div class="example-container">
    <div class="child1">
      Case 1 - Sample Text 1
    </div>
  </div>
    
  <div class="example-container">
    Here we can't see through the overlay.
    <div class="child1">
      Case 2 - Sample text 2
    </div>
     <div class="overlay">
     </div>
  </div>
</div>

SCSS

.root{
  position:relative;
    margin: 10px;
}

.overlay {
    position: absolute; 
    background-color: gray;
    top:0;
    left:0;
    width: 100px;
    height: 100px;
  }
 
.example-container{
  width: 100px;
  height: 100px;
  border: solid 1px black;
  padding: 10px;
  position: relative;
  margin-top: 10px;
}