JSFiddle - React, Tailwind, and code Playground

by laiqs2011

HTML

<div id="box-container">
  box-container relative
	<div id="box-red">
    box-red relative
	  <div id="box-red-child">box-red-child absolute</div>   
	</div>
	<div id="box-green">
    box-green relative
	  <div id="box-green-child">box-green-child absolute</div>
	</div> 
</div>

CSS

#box-container {
		position: relative;      
		height: 300px;   
		background: gray;
    padding: 10px;
	}
	#box-red {
		position: relative; 
    width: 50%;
		height: 100px;
		background: rgba(255, 0, 0, .5);
    margin-bottom: 10px;
	}
 
	#box-green {
	  position: relative;
    width: 50%;
		height:100px;
		background: rgba(0, 255, 0, .5);
	}
  #box-red-child {
    position: absolute; top: 30px; left: 100px;  
    width: 50%;
    height: 200px;
    background: rgba(200, 0, 0, 1);
    outline: solid blue 1px;
  }
  #box-green-child {   
    position: absolute; top: 40px; left: 10px;    
    width: 50%;
    height: 100px;
    background: rgba(0, 200, 0, 1);
    text-align: right;
    outline: solid blue 1px;
  }