JSFiddle - React, Tailwind, and code Playground

HTML

<div id="overlay"></div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi possimus numquam hic magnam eius maiores ad ex harum ipsum deleniti architecto ea obcaecati quod quia vitae sapiente asperiores sunt molestiae accusantium qui eveniet consectetur impedit voluptates! Ea quae amet magnam velit tempora quam sit architecto nobis praesentium nostrum consequatur illo non vel fugiat expedita id magni possimus. Placeat reprehenderit optio dolore voluptatem explicabo atque vel? Molestiae necessitatibus nihil tenetur harum quos velit doloribus facilis debitis nobis quidem hic illum earum cum rerum reprehenderit quibusdam labore perspiciatis similique delectus corrupti. Deserunt quaerat qui velit accusantium et pariatur soluta adipisci vitae tempore nobis suscipit eaque nihil necessitatibus recusandae nam ab ex enim laboriosam voluptates excepturi. Dolorem dignissimos fuga iste commodi quos hic nostrum reprehenderit modi eos nihil! Ex fugit repellendus praesentium quae temporibus. Fuga praesentium voluptas asperiores eius porro rerum nihil sunt officiis tenetur ipsum ullam iure natus quis. Modi porro pariatur qui ex reprehenderit repellendus a ut minus quo deserunt expedita adipisci ab mollitia est distinctio aspernatur cupiditate? Incidunt minima nemo reiciendis impedit ipsam numquam eaque cupiditate asperiores excepturi sit iure autem aut suscipit rerum velit maxime ipsum laboriosam ad quis illum perferendis iste vitae corrupti neque earum necessitatibus totam aliquid ipsa tempora! Architecto perspiciatis iure facere id error sit natus nulla ex magni delectus maxime enim repudiandae pariatur consequatur asperiores fuga minima excepturi doloremque ipsa assumenda exercitationem magnam amet aliquam! Obcaecati rerum ad alias eius iusto magnam nostrum ducimus mollitia. Soluta sit qui aliquid excepturi commodi ex sunt quis expedita odio magni delectus facere blanditiis assumenda pariatur laboriosam officia ipsa corporis quia atque neque numquam. Unde...

CSS

html.overlay-active,
html.overlay-active body {
    height: 100%;
    overflow: hidden;
}


#overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9999px;
    opacity: 0.7;
    background: red;
    display: none;
}

JavaScript

var scrollPos;

// Show overlay
$('.btn').on("click", function() {

    
scrollPos = $(window).scrollTop();
    
    $('#overlay').show();
    $('html').addClass( 'overlay-active' );
   
    e.preventDefault();
});

// Hide overlay
$('#overlay').on("click", function(e) {

    
    $(this).hide();
    $('html').removeClass( 'overlay-active' );
    
    $('html, body').scrollTop( scrollPos );
e.preventDefault();
});