JSFiddle - React, Tailwind, and code Playground

HTML

<body class="home">
    <header id="header">
        <div class="container">
            <div class="top-menu slide">
                <nav id="main-menu" class="slide container-full"> <a class="logo" href="#"><span class="logo-init slide"><span class="logo-small"></a>

                    <div class="menu-items">
                        <ul>
                            <li><a class="menu-switcher slide" href="#"> <span class="menu-content">Menu</span></a>
                            </li>
                            <li><a class="menu-switcher slide" href="#"> <span class="menu-content">item 1</span></a>
                            </li>
                            <li><a class="no-icon menu-switcher slide hide-mobile" href="#">item 2</a>
                            </li>
                            <li><a class="no-icon get-quote menu-switcher slide" href="#">Button</a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
            <div id="slider"></div>
            <div id="trigger">Trigger</div>
        </div>
    </header>
    <section id="empty-content"></section>
    <footer>
        <p></p>
    </footer>
</body>

CSS

* {
    margin: 0;
    padding: 0;
}
body {
    background-color:#ddd;
}
#empty-content {
    width: 100%;
    height: 2000px;
}
.container, .top-menu {
    width: 100%;
}
.container-full {
    width: 100%;
    margin: 0 auto;
}
#slider {
    width: 100%;
    background: #ccc no-repeat 50% 50%;
    background-size: cover;
    height: 500px;
}
#trigger {
    position: absolute;
    bottom: 20%;
    left:0px;
    width:60px;
    height:auto;
    background-color:#000;
    color:white;
    padding:20px;
}
.top-menu nav {
    height: 58px;
    background-color: #FFF;
}
.top-menu {
    position:fixed;
}
.top-menu.headroom--top {
}
.top-menu.animated, .top-menu.slideUp, .top-menu.headroom--top {
    position: fixed;
}
.top-menu.slideUp {
    transform: translateY(-100%);
    margin-top: -60px;
    /*translate not working with viewport scale mobile?*/
}
.top-menu.slideDown {
    transform: translateY(0%);
}
.slide {
    transition: all 0.25s ease-in-out 0s;
}
#main-menu.container-full {
    position: relative;
}
#main-menu a {
    color: #000;
    text-decoration: none;
}
#main-menu a:hover {
    color: #888;
}
.menu-switcher {
    float: right;
    margin-top: 16px;
    margin-right: 25px;
    font-size: 14px;
}
#main-menu .menu-icon {
    font-size: 23px;
}
#main-menu .mdi-social-person {
    font-size: 22px;
}
.menu-items {
    float: right;
}
.menu-items ul li {
    list-style: none;
    display: inline;
}
.menu-items ul li a {
    float: right;
    margin-right: 25px;
}
.menu-switcher.no-icon {
    margin-top: 19px;
}
.menu-switcher.no-icon.get-quote {
    padding-right: 16px;
}
.menu-content {
    display: block;
    float: left;
}
.menu-text-icon {
    margin-top: 3px;
    margin-left: 5px;
}
.logo img.logo-init {
    width: 56px;
    height: 56px;
}
.logo img.logo-small {
    display: inline;
    opacity: 0;
    width: 85px;
    height: 85px;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.35s ease-in-out 0s;
}
.hide-mobile, .hide-tablet...

JavaScript

/*!
 * headroom.js v0.7.0 - Give your page some headroom. Hide your header until you need it
 * Copyright (c) 2014 Nick Williams - http://wicky.nillia.ms/headroom.js
 * License: MIT
 */

!function(a,b){"use strict";function c(a){this.callback=a,this.ticking=!1}function d(b){return b&&"undefined"!=typeof a&&(b===a||b.nodeType)}function e(a){if(arguments.length<=0)throw new Error("Missing arguments in extend function");var b,c,f=a||{};for(c=1;c<arguments.length;c++){var g=arguments[c]||{};for(b in g)f[b]="object"!=typeof f[b]||d(f[b])?f[b]||g[b]:e(f[b],g[b])}return f}function f(a){return a===Object(a)?a:{down:a,up:a}}function g(a,b){b=e(b,g.options),this.lastKnownScrollY=0,this.elem=a,this.debouncer=new c(this.update.bind(this)),this.tolerance=f(b.tolerance),this.classes=b.classes,this.offset=b.offset,this.scroller=b.scroller,this.initialised=!1,this.onPin=b.onPin,this.onUnpin=b.onUnpin,this.onTop=b.onTop,this.onNotTop=b.onNotTop}var h={bind:!!function(){}.bind,classList:"classList"in b.documentElement,rAF:!!(a.requestAnimationFrame||a.webkitRequestAnimationFrame||a.mozRequestAnimationFrame)};a.requestAnimationFrame=a.requestAnimationFrame||a.webkitRequestAnimationFrame||a.mozRequestAnimationFrame,c.prototype={constructor:c,update:function(){this.callback&&this.callback(),this.ticking=!1},requestTick:function(){this.ticking||(requestAnimationFrame(this.rafCallback||(this.rafCallback=this.update.bind(this))),this.ticking=!0)},handleEvent:function(){this.requestTick()}},g.prototype={constructor:g,init:function(){return g.cutsTheMustard?(this.elem.classList.add(this.classes.initial),setTimeout(this.attachEvent.bind(this),100),this):void 0},destroy:function(){var...