JSFiddle - React, Tailwind, and code Playground

by Santosh Thakur

HTML

<div class="container">
  <div class="innerContainer three">Three There is my position</div>
  <div class="innerContainer two">Two There is my position</div>
  <div class="innerContainer one">One There is my position</div>
</div>

CSS

.container{
  border:1px solid red;
  width:400px;
  height:400px;
 margin: 0 auto;
 position:relative;
}
.innerContainer{
  border:1px solid green;
  width:100px;
  height:100px;
  padding:10px;
  position:absolute;
}
.one{
  background:#ff00cc;
  top:0;
  left:0;
  z-index:1;
}
.two{
  background:#ccff00;
  top:20px;
  left:20px;
  z-index:3;
}
.three{ 
  background:#ffcc00;
  margin:0 auto;
  width:100px;
  top:10px;
  left:40px;
  z-index:2;
}