JSFiddle - React, Tailwind, and code Playground

HTML

<div class="up">
        <div class="wrap">
            <div class="up__head"></div>
            <div class="up__foot"></div>
        </div>
    </div>
   <div class="down">
        <div class="wrap">
            <div class="footer"></div>
        </div>
    </div>

CSS

.up{
    min-width:592px;
    max-width:70%;
    /* background:gray; */
    height:50%;
    margin:0 auto;    
}
  
.up__head{
    width:100%;
    height:100px;
    background-color:#616262;
    margin-bottom:200px;
}
 
.up__foot{
    background:#000;
    height:325px;
    width:100%; 
}
 
.down{
    min-width:592px;
    max-width:70%;
    height:200px;
    margin:0 auto;
    background: #ff0000;
    position: absolute;
    top: 500px;    
    z-index: -1;
}