JSFiddle - React, Tailwind, and code Playground

HTML

<div id="apDiv1"><a href="javascript:alert('link1');">Link 1</a>
</div>
<div id="apDiv2">
    <p>&nbsp;</p>
    <p><a href="javascript:alert('link 2');">Link 2</a>
    </p>
</div>

CSS

#apDiv1 {
    position: absolute;
    left: 38px;
    top: 28px;
    width: 221px;
    height: 182px;
    z-index: 1;
    text-align:right;
    background-color:red;
}
#apDiv2 {
    position: absolute;
    pointer-events:none;
    left: 117px;
    top: 13px;
    width: 169px;
    height: 210px;
    z-index: 2;
    background-color:green;
    opacity: 0.6;
}
#apDiv2 a {
    pointer-events:auto;
}
}