JSFiddle - React, Tailwind, and code Playground

by bhatnagar018

HTML

<div id="div1" class="div1 borderBackgr_1" onClick="handleEvent('div1')">
  div1
  <div id="div2" class="div2 borderBackgr_2" onclick="handleEvent_1('div2')">
    div2
    <div id="div3" class="div3 borderBackgr_3">
      div3
    </div>
  </div>
</div>

CSS

.div1 {

  position: relative;
  margin: 1em auto;
  min-width: 25em;
  width:inherit;
  height: 20em;
}

.div2 {
  
  position: absolute;
  left: calc((100% - 20em) / 2);
  top: calc((100% - 15em) / 2);
  width: inherit;
  min-width:20em;
  height: 15em;
}

.div3 {
  
  position: absolute;
  left: calc((100% - 15em) / 2);
  top: calc((100% - 10em) / 2);
  width: 50em;
  height: 10em;
}

.borderBackgr_1 {
  border: solid 1px black;
  background: green;
}

.borderBackgr_2 {
  border: solid 1px blueviolet;
  background: yellow;
}

.borderBackgr_3 {
  border: solid 1px green;
  background: brown;
}