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

html, body {
    height: 100%;
    margin: 0;
}

.turnIntoOverlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: skyblue;
    background-color: rgba(135, 206, 235, 0.4);
}

.turnIntoOverlay > div {
    position: absolute;
    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;
}