JSFiddle - React, Tailwind, and code Playground

HTML

<div class='div1'>
    <div class='div2'>
        <div class='div3'></div>
    </div>
</div>

CSS

.div1{
  width: 400px; 
  height: 400px; 
  background-color: purple; 
  position: relative;
  z-index: 1;
}

.div2{
  width: 200px; 
  height: 200px; 
  background-color: blue;  
  z-index: 1;
}

.div3{
  width: 100px; 
  height: 100px; 
  background-color: green; 
  position: relative;
  z-index: -1;
  left:150px;
}