JSFiddle - React, Tailwind, and code Playground

HTML

<div id="super-container">
<div class="container">
    <header>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Shop Online</a></li>
                <li><a href="#">Lookbook</a></li>
                <li><a href="#">Shipping/Returns</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">My Account</a></li>
                <li><a href="#">View Bag/Checkout</a></li>
            </ul>
        </nav>
    </header>
    <section id="main">
        <p>Not really much content on this page</p>
        <p>A footer that sticks to the bottom + Slide out-effect</p>
    </section>
</div>
</div>
    
<footer>

        <ul><li>OH HAI</li></ul>

</footer>

CSS

html { 
  height: 100%;
}

body {
  margin: 0;
  padding: 0;

  font-family: "Helvetica Neue", Arial;
  font-size: 62.5%;

  height: 100%;
  position:relative;
  z-index:0;
}

/*Opera Fix*/
body:before {
  content:"";
  height:100%;
  float:left;
  width:0;
  margin-top:-32767px;/
}

#super-container {
  min-height: 100%;
  z-index:100;
  background: white; /* If there is no background color defined, the footer will show through */
  -webkit-box-shadow: 0px 0px 20px rgba(50, 50, 50, 0.3);
  -moz-box-shadow:    0px 0px 20px rgba(50, 50, 50, 0.3);
  box-shadow:         0px 0px 20px rgba(50, 50, 50, 0.3);
}

header {
  position: relative;
  padding: 10px 0 0 0;
}

nav ul {
  text-align: center
}
nav ul li {
  display: inline-block;
  margin-top: 15px;
  padding: 5px;
  font-size: 1.6em;
}
nav ul li a:hover {
  border-bottom: 2px solid red;
}
#main {
  margin: 100px 0 0 0;
  position: relative;
  font-size: 1.7em;
  text-align: center;
}

footer {
  position: relative;
  height: 400px;
  clear:both;
  background: #fff;
  z-index:-2500;
}
footer > ul{
  position:fixed;
  bottom:0;
  padding-bottom: 200px;
  z-index:-2000;
  font-size: 10em
}