JSFiddle - React, Tailwind, and code Playground

HTML

<div id="modal"><div></div></div>

<p>text text text text text</p>
<p>more content blah blah blah</p>

CSS

body { padding: 0; text-align: center; }
p { background: rgb(100,100,100); padding: 0px 0; }

#modal {
    width: 100%;
    height: 100%;
    position: fixed;
}

#modal > div {
    width: 200px;
    height: 200px;
    background: rgb(200,200,200);
    position: absolute;
    top: 20px;
    left: 50%;
    margin-left: -100px;
    z-index: 999;
}