JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main" style="width:100%; z-index:1; position:relative;">
    <div id="header" style="width:100%; height:175px; text-align:center; background:#151515; z-index:1;"></div>
    <div id="contents" style="width:100%; height:400px; position:relative; background:#FFF; z-index:1;"></div>
    <div id="footer" style="width:100%; height:200px; position:relative; background:#151515; z-index:1;"></div>
</div>

<div id="square"></div>

CSS

#square {
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:0 auto;
    margin-top:50px;
    position: absolute;
    width:80%;
    height:100%;
    background-color:#333;
    z-index:10;
}