JSFiddle - React, Tailwind, and code Playground

by laiqs2011

HTML

<div id="box-container">
	<div id="box-red">
	  box-red z-index: 2
    <div id="box-red-child">
      box-red-child z-index: 888
    </div>
	</div>
	<div id="box-green">
    box-green z-index: 1
	  <div id="box-green-child">
	    box-green-child z-index: 999
	  </div>
	</div>
</div>

CSS

#box-container {
		position: relative;  
		height: 200px;   
		background: gray;
    padding: 10px;
	}
	#box-red {
		position: absolute; top: 10px; left: 10px;
    z-index: 2;   
    width: 50%;
		height: 50px;
		background: red;
	}
	#box-green {
	  position: absolute; top: 40px; left: 60px;
    z-index: 1;   
    width: 50%;
		height: 50px;
		background: green;
	}
  #box-red-child {
    position: absolute; top: 20px; left: 60px;
    z-index: 888;   
    width: 70%;
		height: 50px;
		background: pink;
  }
  #box-green-child {
    position: absolute; top: 20px; left: 80px;
    z-index: 999;   
    width: 70%;
		height: 50px;
		background: lightgreen;
  }