JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box red">
  <div class="box green" style="margin: 25px; z-index: 11" />
</div>
<div 
  class="box purple" 
   style="margin-top: -100px; margin-left: 50px; z-index: 10">
  <div class="box pink" style="margin: 25px; z-index: 9999" />
</div>
<div 
  class="box black" 
  style="margin-top: -100px; margin-left: 50px; z-index: 9"
/>

CSS

.box {
  display: inline-block;
  position: relative;
  width: 100px;
  height: 100px;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

.purple {
  background-color: purple;
}

.pink {
  background-color: pink;
}

.black {
  background-color: black;
}