JSFiddle - React, Tailwind, and code Playground

HTML

<div id="top">
</div>
<div id="bottom">
    <div id="middle">
    </div>
    asdasdasdadadaddsssssss
</div>

CSS

#top {
    background: #333;
    height: 400px;   
}

#middle {
    background: #999;
    height: 200px;
    left: 50%;
    margin-left: -40%;
    position : absolute;
    top: -100px;
    width: 80%; 
}

#bottom {
    background: #666;
    height: 400px;
    position: relative;   
}