JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="wrapper">
        <div class="header">
            Header
        </div>
        <div class="content">
            This is the content section
        </div>
        <div class="stream-content">
                This is the stream content.
        </div>
        <div class="push">
        </div>
    </div>
    <div class="footer">
        
    </div>
<body>

CSS

html, body {height: 100%;}

* {margin: 0;}
.header {height:55px;background-color:yellow;}
.header .content {padding: 1.5% 9%;}
.wrapper {min-height:100%;height:auto !important;height:100%;margin: 0 auto -5px;}
.stream-content {height: 55px;border-bottom: 3px solid #dfd4ce;border-top: 3px solid #dfd4ce;padding:0 5%;margin-bottom:  1.5%;}
.footer {width: 100%;height:5px;background-color:red;}
.footer, .push {height:5px;}