JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="wrapper">
        <nav id="myNav" class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li><a href="#" class="mainTab" id="accueil">Accueil</a></li>                            
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#" class="mainTab" id="contact">Contact</a></li>
                    </ul>
                </div>
            </div>
        </nav>
        <div id="page" class="col-lg-12">
            some text
        </div>
        <div id="footer" class="col-lg-12">
        </div>
    </div>
</body>

CSS

body,html{
    height:100%;
}
#wrapper{
    border:2px solid red;
    min-height:100%;
    padding:2%;
}
#page{
    border:2px solid blue;
}
#footer{
    margin-top:20px;
    margin-bottom:15px;
    height:120px;
    position:relative;
    bottom:0;
    border:2px solid green;
}