JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test" class="box">
  <p>
    I want this element on the top
  </p>
</div>
<div id="test2" class="box">
  <p>
    I want this element behind the other one.
  </p>
</div>
<div id="test3" class="box">
  <p>
    I want this element between the two others.
  </p>
</div>

CSS

.box { width: 200px; height: 200px; color: #fff; position: relative;  border: 2px solid #000; padding: 10px;}

#test { background: red;  z-index: 3;}

#test2 { background: green;  margin-top: -50px; margin-left: 50px;  z-index: 1;}

#test3 { background: blue;  margin-top: -300px; margin-left: 150px;  z-index: 2;}