JSFiddle - React, Tailwind, and code Playground

HTML

<div id='header'>
    HEADER
</div>
<div id='body'>
    BODY
</div>
<div id='footer'>
    FOOTER
</div>

CSS

*{
    font-family:"Trebuchet MS", Helvetica, sans-serif;
    text-align:center;
}
#header,#footer{
    position:relative;
    height:150px;
    background:#ccc;
    border:solid 1px #bbb;
}
#footer{
    bottom:0;
}
#body{
    position:relative;
    margin-top:-50px;
    margin-bottom:-50px;
    min-height:150px;
    background:#aaa;
    width:70%;
    margin-right:auto;
    margin-left:auto;
    padding:50px 15px;
    box-shadow:0px 0px 10px 1px #aaa;
    border:solid 1px #999;
    opacity:0.92;
    z-index:999;
}