JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid">
    <span class="span1">
        <h4>1</h4>
    </span>
    <span class="span2">
        <h4>2</h4>
        <span class="span5">Stuff</span>
    </span>
    <span class="span3">
        <h4>3</h4>
        
    </span>
    <span class="span4">
        <h4>4</h4>
        
    </span>
</div>

CSS

.span1 {
    background-color: #ffff00;
    display: inline-block;
    width: 100px;
    height: 100px;
    vertical-align: top;
    position:relative;
    z-index: 1;
}
.span2 {
    background-color: #ffff00;
    display: inline-block;
    width: 100px;
    height: 100px;
    vertical-align: top;
    position:relative;
    z-index: 5;
}
.span3 {
    background-color: #ffff00;
    display: inline-block;
    width: 100px;
    height: 100px;
    vertical-align: top;
    position:relative;
    z-index: 3;
}
.span4 {
    background-color: #ffff00;
    display: inline-block;
    width: 100px;
    height: 100px;
    vertical-align: top;
    position:relative;
    z-index: 4;
}

.span5  {
    background-color: #ff00ff;
    display: inline-block;
    width: 250px;
    position:absolute;
    z-index:1;    
}