JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mainpage">
    <a href='javascript: void(0)' class="show-popup">Show popup</a>
    <div>a</div>
    <div>b</div>
    <div>c</div>
    <div>d</div>
    <div>e</div>
    <div>f</div>
    <div>g</div>
    <div>h</div>
    <div>i</div>
    <div>j</div>
    <div>k</div>
    <div>l</div>
    <div>m</div>
    <div>n</div>
    <div>o</div>
    <div>p</div>
    <div>q</div>
    <div>r</div>
    <div>s</div>
    <div>t</div>
    <div>u</div>
    <div>v</div>
    <div>w</div>
    <div>x</div>
    <div>y</div>
    <div>z</div>
    <div>a</div>
    <div>b</div>
    <div>c</div>
    <div>d</div>
    <div>e</div>
    <div>f</div>
    <div>g</div>
    <div>h</div>
    <div>i</div>
    <div>j</div>
    <div>k</div>
    <div>l</div>
    <div>m</div>
    <div>n</div>
    <div>o</div>
    <div>p</div>
    <div>q</div>
    <div>r</div>
    <div>s</div>
    <div>t</div>
    <div>u</div>
    <div>v</div>
    <div>w</div>
    <div>x</div>
    <div>y</div>
    <div>z</div>
    <div>a</div>
    <div>b</div>
    <div>c</div>
    <div>d</div>
    <div>e</div>
    <div>f</div>
    <div>g</div>
    <div>h</div>
    <div>i</div>
    <div>j</div>
    <div>k</div>
    <div>l</div>
    <div>m</div>
    <div>n</div>
    <div>o</div>
    <div>p</div>
    <div>q</div>
    <div>r</div>
    <div>s</div>
    <div>t</div>
    <div>u</div>
    <div>v</div>
    <div>w</div>
    <div>x</div>
    <div>y</div>
    <div>z</div>
    <div>a</div>
    <div>b</div>
    <div>c</div>
    <div>d</div>
    <div>e</div>
    <div>f</div>
    <div>g</div>
    <div>h</div>
    <div>i</div>
    <div>j</div>
    <div>k</div>
    <div>l</div>
    <div>m</div>
    <div>n</div>
    <div>o</div>
    <div>p</div>
    <div>q</div>
    <div>r</div>
    <div>s</div>
    <div>t</div>
    <div>u</div>
    <div>v</div>
    <div>w</div>
    <div>x</div>
    <div>y</div>
    <div>z</div>
</div>

<div class="overlay hide">
    <div class="popup">
        This is my popup.
        <a href="javascript: void(0)"...

CSS

.no-scroll
{
    overflow: hidden;
}

.overlay
{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: scroll;
    background-color: rgba(255, 0, 0, 0.2);    
}

.popup
{
    position: relative;
    width: 50%;
    margin: 100px auto;
    background-color: green;
}

.hide
{
    display: none;
}

JavaScript

$(".show-popup").click(
    function () {
        $(".overlay").removeClass("hide");
        $(document.body).addClass("no-scroll");
    });
    
$(".hide-popup").click(
function () {
    $(".overlay").addClass("hide");
    $(document.body).removeClass("no-scroll");
});