JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div id="wrapper">
    <table>
        <td><div id="left-header"></div></td>
        <td><div id="center-header"></div></td>
        <td><div id="right-header"></div></td>
    </table>
    <div id="content"></div>
</div>
<div id="footer"></div>
</body>

CSS

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
body {
    position:relative;
    min-height: 100%;
    height: auto !important;
    height: 100%;
}
#left-header {
    height: 100px;
    float: left;
    width: 100px;
    background:yellow;
}
#right-header {
    height: 100px;
    float: right;
    width: 100px;
    background:yellow;
}
#center-header {
    background: black;
    height:100px;
    width:30px;
    background-position:center;
}
#content {
    padding-bottom: 40px;
}
#footer {
    height: 40px;
    width: 100%;
    position: absolute;
    left:0;
    bottom: 0;
    background:green;
}