JSFiddle - React, Tailwind, and code Playground

HTML

<div id="left"></div>
<div id="right"></div>
<div id="wrapper">
    <div id="container">
        <p>The wrapper is needed to overlay the centered div. Because the left and right div are positioned absolute, they would automatically be on top of the static div. The wrapper overrules this.</p>
        <p>The container should have the gradient background and you're set. For spanning the whole height, you can use javascripts to calculate the page-height, and set that as the height of your div's.</p>
    </div>
</div>

CSS

#left, #right {
    width: 50%;
    height: 100%;
    position: absolute;
    z-index: 1;
}

#left { left: 0; background-color: #f9f9f9; }
#right { right: 0; background-color:#000000; }

#wrapper {
    text-align: center;
    z-index: 5;
    position: absolute;
    width: 100%;
    height: 100%;
}
#container {
    width: 400px;
    height: 100%;
    background-color: #cccccc;
    margin: 0 auto;
    text-align: left;
}