JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">
    header
</div>
<div class="content">				
    <div class="left">
        left
    </div>			
    <div class="right">
        right
    </div>
</div>
<div class="footer">
    footer
</div>

CSS

html, body {
    height: 100%;
    margin: 0;
}
.header, .footer {
    width: 100%;
    margin: 0 auto;
    background: green;
    position: relative;
    z-index: 0;
}
.header, .footer {
    min-height: 50px;
}
.content, .left, .right {
    min-height: 100%;
    background: rgba(255, 0, 0, 0.3);
}
.content {
    margin: -50px auto;
    width: 400px;
    background: rgba(255, 0, 0, 0.3);
}
.left, .right {
    float: left;
    width: 50%;
    padding: 50px 0;
}