JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

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