JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<body>
    <!-- Wrap all page content here -->
    <div id="wrap">
        <!-- Begin page navigation -->
        <nav id="nav-container" class="navbar navbar-default container" role="navigation">
            <div class="container">
                <!-- Here I put a very normal Bootstrap 3 navbar -->
            </div>
        </nav>
        <!-- Begin page content -->
        <div id="main-container" class="container">
            <!-- All my content goes here! -->
        </div>
    </div>
    <!-- Begin page footer -->
    <footer id="footer" class="container">
        <div class="container">
        </div>
    </footer>
</body>

CSS

html, body {
  height: 100%;
  /* The html and body elements cannot have any padding or margin. */
}
.navbar-default {margin: 0; background: orange;}
/* Wrapper for page content to push down footer */
#wrap {
  min-height: 100%;
  height: 100%;
  /* Negative indent footer by its height */
  margin: 0 auto -100px;
  /* Pad bottom by footer height */
  padding: 0 0 100px;
}

/* Set the fixed height of the footer here */
#footer {
  height: 100px;
  background: orange;
}

body {
    /* Body's background will be grey */
    background-color: #C0C0C0;
}
#main-container {
    min-height: 100%;
    background: #fff;
}