JSFiddle - React, Tailwind, and code Playground

by Kawaljit Singh

HTML

<div class="container">
<div class="box1">
</div>
<div class="box2">
</div>
</div>

CSS

.container {
  position: relative;
}
.box1 {
 width: 100px;
 height: 100px;
 position: absolute;
 top: 100px;
 left: 100px;
 box-sizing: border-box;
 background: blue;
}

.box1:after {
  content: '';
  display: block;
  width: 95px;
 height: 95px;
 position: absolute;
 border: 3px solid black;
 z-index: 3;
 
}

.box2 {
 width: 100px;
 height: 100px;
 position: absolute;
 top: 150px;
 left: 150px;
 box-sizing: border-box;
 background: red;
 border: 3px solid black;
}