JSFiddle - React, Tailwind, and code Playground

HTML

<div class="no1">
Parent Div
<div>
<div>
<div class="no3">
<div>
<div class="no4">
<div>
<div>
<div>
<div class="no5">
<div class="no2">
Child Div

</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

CSS

.no1 {
  width:800px;
  height:300px;
  background-color:red;
  position:relative;
}

.no2 {
  position:relative;
  width:500px;
  height:200px;
    background-color:blue;
    z-index:-1;
}

.no3 {
  position:relative;
  
}

.no4 {
  position:relative;
  
}
.no5 {
  position:relative;
  
}