JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
<div class="wrap w1">
    <div></div>
</div>
<div class="wrap w2">
    <div></div>
</div>
<div class="wrap w3">
    <div></div>
</div>
</div>

CSS

.container { position: relative; }

.wrap { border: 2px dotted #999; padding: 10px; position: absolute; background: white; }

.w1 { top: 30px; left: 50px; width: 50px; height: 60px; border-color: #999 #fff #fff #999; z-index: 3; }
.w2 { top: 20px; left: 122px; width: 30px; height: 70px; border-color: #999 #999 #fff #999; z-index: 2; }
.w3 { top: 112px; left: 30px; width: 150px; height: 50px; z-index: 1; }

.wrap > div { height: 100%; }
.w1 > div { background: red; }
.w2 > div { background: green; }
.w3 > div { background: blue; }