JSFiddle - React, Tailwind, and code Playground

HTML

<div id="pageWrapper">
        <div id="contentHeader">
            <b>content Header</b>
            <p>Lorem ipsum dolor sit amet, consectetur <a href="#" onclick="contentClick();">adipiscing</a> elit.</p>
        </div>
        <div id="contentBody">
            <b>content Body</b>
            <p>Pellentesque sit amet erat tellus. In hac <a href="#" onclick="contentClick();">habitasse</a> platea dictumst. Morbi velit sem, lacinia at imperdiet non, volutpat vel elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in blandit tortor. Vestibulum tristique euismod nunc quis pharetra. Mauris vitae mi eu sapien euismod blandit. Nunc egestas blandit purus vel ultricies. Vivamus eget ante vel dui blandit cursus. Nam convallis ullamcorper luctus. <a href="#" onclick="contentClick();">Suspendisse potenti</a>. Curabitur nec enim ac turpis mattis consectetur. Morbi scelerisque imperdiet dui, at molestie elit aliquam vel. Vivamus a elit vitae velit vestibulum elementum. Donec auctor tincidunt velit tincidunt blandit. Nunc lobortis malesuada nulla eget gravida.</p>
            <p>Mauris ultricies magna non tellus euismod non aliquam metus eleifend. Ut ultrices consequat pulvinar. Class aptent taciti <a href="#" onclick="contentClick();">sociosqu ad litora</a> torquent per conubia nostra, per inceptos himenaeos. Nullam pharetra tortor quis leo iaculis vulputate. Nunc purus mi, dapibus ut commodo et, tempus quis sapien. Etiam sit amet lacus odio. Sed iaculis, ante sed rutrum semper, velit nulla pharetra nulla, vitae placerat libero lectus eu nulla. Vestibulum varius dui ante, vitae congue arcu. Ut fermentum, diam vel dictum aliquet, nisi mi convallis ligula, in laoreet velit massa sed lorem. Praesent in sagittis odio.</p>
        </div>
        <div id="contentOverlay">
            <b>content PopOverlay</b>
            <p>In hac habitasse platea <a href="#" onclick="contentClick();">dictumst</a>.</p>
        </div>
        <div id="contentFooter">
        ...

CSS

body { margin: 0; padding: 0; }
#pageWrapper div {
    background-color: #DDD;
    border: 2px solid #000;
    margin: 5px;
    padding: 20px;
    text-align: center;
}
#contentOverlay {
    z-index: 999;
    background-color: #FFF !important;
    position: absolute;
    top: 40%; right: 40%; bottom: 40%; left: 40%;
    height: 20%;
    width: 20%;
}
#fullscreenOverlay {
    z-index: 2147483647;
    position: fixed;
    top: -5px; right: -5px; bottom: -5px; left: -5px;
    height: 500%;
    width: 500%;
    text-align: center;
    vertical-align: middle;
}
#fullscreenOverlay a {
    display: block;
    height: 100%;
    width: 100%;
}

JavaScript

function overlayClick() { alert('you clicked the invisible overlay!'); }
function contentClick() { alert('you clicked the content!'); }