JSFiddle - React, Tailwind, and code Playground

HTML

<div id="holder">
        <div id="header" class="container-fluid">
            <div class="navbar">
                <a href="#menu-toggle" id="menu-toggle" class="glyphicon glyphicon-menu-hamburger"></a>    
                <a class="navbar-brand">Keypad <span id="counterId"></span></a>
            </div>
        </div>
        <div id="numbers" class="container-fluid">

        </div>
        <footer class="footer">
            <div id="keypad" class="container-fluid">
                <a href="#keypad-toggle" id="keypad-toggle"><span class="glyphicon glyphicon-th"></span> Number Pad
                </a>
            </div>
        </footer>
</div>

CSS

#header{ background-color: #273746 ; height:55px; box-shadow: 2px 2px 2px 2px;}
        #numbers{background-color: red; height: 100%; }
#keypad{height:30px;background-color: springgreen; text-align: center; box-shadow: 15px 15px 15px 15px black;}
.footer{width: 100%; position: absolute; left: 0; bottom: 0;}
html, body, #holder {
    height: 100%;
}