JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
        <div class="top"></div>
        <div class="bottom">
            <div class="inner">foo</div>
        </div>
    </div>

CSS

.wrapper {width: 460px; margin: 0 auto;}
        .top, .bottom {height: 300px;}
        .inner {height: 100px; width: 320px;}
        .top {background: red;}
        .bottom {background: gray;}
        .inner {background: green; padding-left: 5000px; margin-left: -5000px;}