JSFiddle - React, Tailwind, and code Playground

HTML

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

<div class="box2">
<div class="box-top"></div> 
<div class="box-bot"></div>
</div>


<div class="box3">
</div>
<div class="box4">
</div>

CSS

div{
height:100px;
width:100px; 
border:solid 1px;
}

.box1{
position:relative;
    z-index:200;
left:500px;
background-color:#00d8ff;
}



.box2 {
position: relative;
left: 570px;
top: -30px;
border: none;
}

.box-top {
z-index: 200;
position: relative;
border-bottom: none;
height: 50%;
background-color: #f6ff00;
}

.box-bot{
z-index: 200;
/* position: relative; */
left: 570px;
border-top: none;
height: 50%;
background-color: #f6ff00;
}


.box3{
position:relative;
left:500px;
top:-60px;
background-color:#ff69fa;
}

.box4{
position:relative;
left:430px;
top:-230px;
background-color:#24ff00;
}