JSFiddle - React, Tailwind, and code Playground

HTML

<div class="turnIntoOverlay"><div> this div is convertible to pop up!<input/> </div></div>

<div>
    Useless content!           Useless content!           Useless content!                   Useless content!           Useless content!           Useless content!           Useless content!           Useless content!           Useless content!           Useless content!           Useless content!           Useless content! Useless content!           Useless content!           Useless content!                   Useless content!           Useless content!           Useless content!           Useless content!           Useless content!           Useless content!           Useless content!           Useless content!           Useless content!           Useless content!           Useless content!           Useless content!           Useless content!           Useless content!           Useless content!            
</div>

CSS

.turnIntoOverlay > div {
        position: fixed;
        background-color: white;
        top: 60px;
        max-width: 680px;
        z-index: 80;
        border: 6px solid #BBB;
        box-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
        max-height: 800px;
        overflow: auto;
        padding:10px;
    }

    .turnIntoOverlay:after {
        content: "";
        background-color: skyblue;
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: 1;
        opacity: 0.8;
        top: 0;
        left: 0;
    }