JSFiddle - React, Tailwind, and code Playground

HTML

<body>

<div id="superior">
    <header>
    
           AQUI IRÍA EL MENU SUPERIOR
            
    </header>   
</div>


<div id="cuerpo">
   
         AQUI IRÍA LA PARTE PRINCIPAL       

</div>

       
<div id="inferior">
    <footer>

        AQUI IRÍA EL MENU INFERIOR

    </footer>
</div>

  
    
</body>

CSS

body {
    margin: 0px;
    padding: 0px;
}
#superior {
    width:95%; /* menor a 100% para que no aparezca el scroll por el borde de 4px */
    height:50px;
    position:relative;
    margin: 25px auto 0px; /*margen top para bajarlo un poco, auto para centrarlo */
    padding: 0px;
    border:4px solid #000;
    text-align:center;
    background-color:#CCC;
    z-index:50; /* tiene que ser más grande que el del cuerpo*/
}
#cuerpo {
    position:relative; 
    margin: -80px auto 0px; /*top -80 para subirlo , auto para centrar*/
    padding: 80px 0px 0px; /*top para que el contenido no quede oculto por #superior */
    width:75%; 
    border:4px solid #000;
    height:200px;
    background-color:#F60;
    text-align:center;
    
}
#inferior {
    width:95%; /* menor a 100% para que no aparezca el scroll por el borde de 4px */
    height:100px;
    margin: 0 auto;
    padding: 0px;
    background-color:#CCC;
    border:4px solid #000;
    text-align:center;
}