JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box-red">
  <div class="box-blue"></div>
</div>

<div class="box-green pos"></div>
<div class="box-yellow pos"></div>

CSS

.box-red {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  z-index: 2;
}

.box-blue {
  width: 50px;
  height: 50px;
  background-color: blue;
  position: absolute;
  z-index: 1;
}

.box-green {
  width: 100px;
  height: 100px;
  background-color: green;
  position: absolute;
  z-index: 2;
}

.box-yellow {
  width: 50px;
  height: 50px;
  background-color: yellow;
  position: absolute;
  z-index: 1;
}

.pos {
  top: 120px;
}