JSFiddle - React, Tailwind, and code Playground

by Naveen Ravichandran

HTML

<div class=a>
<div class=b>
<div class=c>
<div class=d>
content
</div>
padding
</div>
border
</div>
margin
</div>

CSS

.a{
  position:absolute;
  left:100px;
  width:50%;
  height:50%;
  border:1px solid;
}

.b{
  position:absolute;
  left:50%;
  top:0px;
  width:50%;
  height:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border:1px solid;
}

.c{
  position:absolute;
  left:50%;
  top:0px;
  width:50%;
  height:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border:1px solid;
}
.d{
  position:absolute;
  left:50%;
  top:0px;
  width:50%;
  height:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border:1px solid;
}