JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div id="container"></div>
    <div id="bottom"></div>
</div>

CSS

#wrapper{
    width:100%;
    height:100%;
    position: relative;
}
#top,#bottom{
    background-color: red;
    width:100%;
    height:200px;
    clear:both;
}
#container{
    background-color: brown;
    width:800px;
    height:600px;
    margin:0 auto;
    position: relative;
}
.blueTop{
    width: 100%;
    height: 200px;
    background-color: blue;
    position: absolute;
}
.blueBottom{
    width: 100%;
    height: 300px;
    background-color: blue;
    position: absolute;
    bottom: 200px;
    z-index: -1;
}