JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
    <div class="first"></div>
    <a href="#" class="inner"></a>
    <div class="second"></div>
</div>

CSS

.main {
    position: relative;
} 

.first{
        position: relative;
        width:100%;
        height:200px;
        background:yellow;
        z-index:10;
            }
        .inner{
            position: absolute;
            top: 0;
            left: 0;
            z-index: 999;
            height:200px;
            width:200px;
            background:black;
            }
    .second{
        position: relative;
        width:100%;
        height:200px;
        margin-top:-100px;
        background:rgba(255,0,255,0.5);
        z-index:60;
    }