JSFiddle - React, Tailwind, and code Playground

HTML

<div id="example-auto">
  <div class="box red">
    <div class="box green" style="z-index: 1"></div>
  </div>
  <div class="box blue"></div>
</div>

<div id="example-0">
  <div class="box red" style="z-index: 0">
    <div class="box green" style="z-index: 1"></div>
  </div>
  <div class="box blue"></div>
</div>

CSS

.box {
  position: relative;
  width: 64px;
  height: 64px;
  top: 32px;
  left: 32px;
}

.red {
  background: red;
}

.green {
  background: green;
}

.blue {
  background: blue;
}

#example-0 {
  margin-top: 32px;
}