JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrap">
    <div id="header">
        <div id="slider"></div>
    </div>
    <div id="content">
        ...
    </div>
    <div id="footer">
        <div id="navigation"></div>
    </div>
</div>

CSS

#wrap {
    margin:5%;
    text-align:center;  
    position:relative;    
}
#header, #content, #footer {
    padding:10px;   
}
#header {
    background-color:#345;
    position:relative;
    z-index: 19;
}
#slider {
    height:30px;
    background-color:#123;
    position:relative;
    
    /* important */
    z-index:20;
}
#content{
    background-color:#765;
    height:100px;
}
#footer {
    background-color:#B66;               
}
#navigation{
    background-color:#833;
    height:10px;
    width:100%;
    cursor:pointer;
    
    /* important */
    position:absolute;
    top:10px;
    left:0;
}