JSFiddle - React, Tailwind, and code Playground

HTML

<div class="col">
    <div class="small1"></div>
    <div class="small2"></div>
    <div class="small1"></div>
    <div class="small1"></div>
    <div class="small2"></div>
    <div class="small1"></div>
</div>
<div class="col">
    <div class="big3"></div>
    <div class="big1"></div>
    <div class="big3"></div>
    <div class="big1"></div>
</div>

CSS

.col{
    position:relative;
    width:210px;
    float:left;
}
.small1,.small2,.big1,.big3{
    position:relative;
    width:200px;
    margin:4px;
    border:1px solid #bbb;
    background:#fff;
}
.small1{
    height:50px;
    z-index:1;
}
.small2{
    left:50px;
    height:50px;
    z-index:2;
}
.big1{
    height:80px;
    z-index:1;
}
.big3{
    height:80px;
    z-index:3;
}