JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="anchorpop pop" id="elPop"></div> <a href="#">link 1</a>
 <a href="#">link 2</a>
 <a href="#">link 3</a>
 <a href="#">link 4</a>

</body>

CSS

.anchorpop {
    display: none;
    position: fixed;
    z-index: 9999;
    width: 100%;
    height: 100%;
    text-align: center;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
}
.anchorpop p {
    background: #fff;
    color: #000;
    width: 300px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 10%;
    height: 200px;
    cursor: pointer;
}
.anchorpop a {
    font-weight: 800;
}

JavaScript

$(function () {
    $('a').click(function () {
        var htmlString = "<p>" + "<br><br>" + "You just clicked: <br><b>" + $(this).text() + "</b><br><br><br>" + "Click anywhere to Close" + "</p>"
        $('.pop').html(htmlString).slideFadeToggle(function () {
            $(this).toggleClass('selected');
        });
    return false;
    });
$("#closeWin, .anchorpop").click(function () {
    $('.anchorpop').hide();
});
});

$.fn.slideFadeToggle = function (easing, callback) {
    return this.animate({
        opacity: 'toggle',
        height: 'toggle'
    }, 'fast', easing, callback);
};