JSFiddle - React, Tailwind, and code Playground

HTML

<div id="graph-container">
    <div id="NW"> 
        <a href="javascript:alert('click me');">on top layer</a>
    </div>
    <div id="NE"> </div>
    <div id="SW"> </div>
    <div id="SE"> </div>
    
</div>

<a href="javascript: alert('clicked');">click me</a>

CSS

#graph-container {
    top: 50px;
    bottom: 50px;
    left: 50px;
    right: 50px;
    position: fixed
    z-index: 9;
    padding-left: 0px;
    padding-right: 0px;
    -webkit-animation: blink 2s linear 0s;
}


#NW { z-index: 10; position:fixed; width:50%; height:50%; top:0;  background:rgba(200,200,20,.5); left:0; 
pointer-events:none;

}
#NE { z-index: 10; position:fixed;background:rgba(20,200,20,.5); width:50%; height:50%; top:0;   left:50%; }

#NW a{
    pointer-events:auto;
    margin-top: 50px;
}

#SW { z-index: 10; position:fixed; width:50%; background:#00F; height:50%; top:50%; left:0; }
#SE { z-index: 10; position:fixed; width:50%; height:50%; top:50%; left:50%; }