JSFiddle - React, Tailwind, and code Playground

by brucifer906

HTML

<div class="parent-1">
  <div class="child-1">
    <div class="child-1-1"></div>
    <div class="child-1-2"></div>
  </div>
  <div class="child-2"></div>
</div>

<div class="parent-2">
  <div class="child-1">
    <div class="child-1-1"></div>
    <div class="child-1-2"></div>
  </div>
  <div class="child-2"></div>
</div>

CSS

[class^="parent"] {
  width: 225px;
  height: 225px;
  background: rgba(255,20,160,0.6);
  float: left;
  margin-right: 2rem;
  padding: 0.5rem;
  position: relative;
}

[class^="child"] {
  width: 100px;
  height: 100px;
  background: rgba(50,10,200,0.4);
  display: inline-block;
  position: absolute;
}

.child-1-2 {
  top: 70px;
  left: 50px;
  z-index: 999;
}

/* This makes it so the children of child-1 will 
   not be able to have a higher z-index than 0.*/
.parent-2 .child-1 {
  z-index: 0;
}

/* .parent-2 .child-1-2 essentially has a 0/999 z-index */

.child-2 {
  top: 125px;
  left: 75px;
  background: rgba(0,200,50,1);
  z-index: 1;
}