JSFiddle - React, Tailwind, and code Playground

HTML

<div class="page-header">
    <div class="top">
        <div class="container text-right">
            Header
        </div>    
    </div>
    <div class="menu">
        <div class="container">
            Menu
        </div>    
    </div>
</div>
<div class="container page no-box">
    <div class="main">
        <!--Main content goes here-->
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. 
        </p>
<p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. 
        </p>
    </div>
    <div class="page-push">
    <!--Acts as a buffer against the footer-->
    </div>
</div>
<div class="page-footer">
    <div class="container">
    </div>
</div>

CSS

html, body {
    height: 100%;
    margin: 0;
    position: relative;
}

.page {
    min-height: 100%;
    position: relative;
    /* Same height as the footer*/
    margin-bottom: -150px;
    padding-bottom: 150px;
    /* These allow the box model to include padding and margin*/
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

    .page.no-box {
        padding-bottom: 0;
    }

.page-push, .page-footer {
    height: 150px;
}

.page-footer {
    /*make sure it sits on top*/
    position: relative;
    z-index: 1;
}

.container {
    margin: 0 auto;
    width: 80%;
    max-width: 1140px;
}

/*****************************************************
* Custom Css
*****************************************************/
body{
    background: rgba(0, 0, 0, .9);
}

/* Stick the header at the top*/
.page-header{
    position:absolute;
    z-index:1;
    height:30px;
    left:0;
    right:0;
}

/*Add a bit of colour*/
.top, .page-footer{
   background:#000;
   color:#fff;
}

.menu{
    background: rgba(255, 255, 255, 0.5);
    margin-top:12px;
    height:100px;
}

.main{
    /* Same height as the top combined divs height + margin*/
    padding-top:142px;
}

/* Change the height of the footer and add colour */
.page{
    background: rgba(255, 255, 255, .5);
    /* Same height as the footer*/
    margin-bottom: -30px;
}

.page-push, .page-footer{
    height:30px;
}

.text-right{
    text-align:right;
}