JSFiddle - React, Tailwind, and code Playground

by Daniel Tan

HTML

<!-- This acts as the overlay, or mask, of your content. -->
<div id="overlay">
    <div id="overlay-top" class="vert"></div>
    <div id="overlay-bottom" class="vert"></div>
    <div id="overlay-left" class="hor"></div>
    <div id="overlay-right" class="hor"></div>
</div>

<!-- The entire content of your page would go here. -->
<div id="content">
    <h1>Top of content</h1>
    <hr />
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. No vix everti corpora corrumpit, et mea exerci ponderum eloquentiam, vis an idque nominati. Ea mel errem conclusionemque, cu sea dicat omnesque. Facilis detracto reprehendunt mei ei.</p>
    <p>Vim aperiam suscipit ne, et has euismod senserit, est ei ornatus mnesarchum. His delicata referrentur ad, vim an sapientem molestiae laboramus, ad quem clita consequuntur ius. Pro ei sint voluptatibus. Elaboraret definitionem per cu, liber deserunt interpretaris ad duo, cu vis petentium vulputate. His at vide patrioque, in labitur alterum sea.</p>
    <p>Putent mentitum referrentur no usu. Ne autem eripuit delectus mei, forensibus persequeris vim eu, sint quaestio ad nec. Offendit aliquyam ius ex. Ex cum option noluisse. Repudiare suscipiantur est ut.</p>
    <p>Ut vero scripta argumentum per, id nemore splendide appellantur vis. Et idque aliquam praesent nec. At wisi impetus deseruisse per, salutatus omittantur ex has. No sed accusata iudicabit, eu corrumpit deseruisse eos, et vis dictas suavitate. Ad quod abhorreant dissentias duo, ius ea quando eruditi nusquam.</p>
    <p>Eos autem debet ut, vel ea omnium dolorum eligendi. Ex has magna assum iudico. Eu dictas hendrerit vis, animal dissentiunt mel cu. Cu usu nemore interesset temporibus. Mea ut adipisci praesent consequuntur, per et brute legimus commune. Pri eirmod dissentiunt ei.</p>
    <p>In nonumy nostro invenire cum. Postea complectitur sit id. An saepe animal omittam usu, quem...

CSS

h1 {
    font-weight: bold;
    text-align: center;
}

p {
    margin: 1em 0;
}

#overlay div {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: gray;
}

/* The top and bottom "borders". */
#overlay .vert {
    height: 100px;
}

/* The left and right "borders". */
#overlay .hor {
    width: 100px;
}

/* Anchor the parts of your overlay boxes to the respective edges of the page. */
#overlay-top { top: 0; }
#overlay-bottom { bottom: 0; }
#overlay-left { left: 0; }
#overlay-right { right: 0; }

/* Your content has padding equal to the sizes of your overlay "borders". */
#content {
    padding: 100px;
}