JSFiddle - React, Tailwind, and code Playground

HTML

<body>
		<div id="d1">#d1
			<div id="d3">#d3</div>
		</div>
		<div id="d2">#d2
			<div id="d4">#d4</div>
		</div>
	</body>

CSS

#d1 { //z-index: ; position: relative; }
#d2 { //z-index: ; position: relative; }
#d3 { //z-index: ; position: relative; }
#d4 { //z-index: ; position: relative; }

#d1, #d2 {
				width: 500px;
				height: 200px;
			}
				
			#d3, #d4 {
				width: 300px;
				height: 150px;
			}
			
			#d1 {
				background-color: rgba(100,100,100,.6);
			}
			
			#d2 {
				background-color: rgba(0,255,0,.6);
				margin-top: -20px;
				margin-left: 20px;
			}
				
			#d3 {
				background-color: rgba(255,0,0,.6);
				margin-top: 70px;
				margin-left: 50px;
			}
					
			#d4 {
				background-color: rgba(0,0,255,.6);
				margin-top: -70px;
				margin-left: 150px;
			}