JSFiddle - React, Tailwind, and code Playground

HTML

<header>
    <div class="header-wrapper cf">
        <h1>HEADER</h1>
            <nav id="primary">
                <ul>
                    <li><a href="#">LINK 1</a></li>
                    <li><a href="#" class="current">LINK 2</a></li>
                    <li><a href="#">LINK 3</a></li>
                    <li><a href="#">LINK 4</a></li>                    
                 </ul>            
             </nav>
    </div>
</header>

CSS

/*-------------------- reset stylesheet --------------------- */
html, body, div, span, h1, h2, h3, p, a, ul, ol, li, img, article, aside, blockquote, figure, figcaption, footer, header, hgroup, menu, nav, section, time {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, time {
	display: block;
}
a {
	outline: none;
}


/*-------------------- clearfix --------------------- */
.cf:before, .cf:after { content: ""; display: table; }
.cf:after { clear: both; }
.cf { *zoom: 1; }


/*-------------------- global styles --------------------- */
body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #fff;
    font-size: 14px;
}


/*-------------------- header, primary navigation & footer --------------------- */
header {
    background-color: #333;
    width: 100%;
}
header h1 {
    float: left;
    margin-right: 75px;
    color: #fff;
}
.header-wrapper {
    max-width: 960px;
    margin: 0 auto;
    padding: 20px 20px 16px 20px;
}
nav#primary {
}
nav#primary ul li {
    padding-top: 1px;
    float: left;
    list-style-type: none;
}
nav#primary ul li a {
    text-decoration: none;
    color: #e5e5e5;
    font-family: 'RobotoCondensed', Arial, Helvetica, sans-serif;
    font-size: 15px;
    text-transform: uppercase;
    margin-right: 30px;
}
nav#primary ul li:last-child a {
    margin-right: 0;
}


/*-------------------- responsive-nav --------------------- */
/*! responsive-nav.js v1.0.20 by @viljamis */
#primary ul {
  margin: 0;
  padding: 0;
  width: 100%;
  display: block;
  list-style: none;
}

#primary li {
  width: 100%;
  display: block;
}

.js #primary {
  clip: rect(0 0 0 0);
  max-height: 0;
  position: absolute;
  display: block;
  overflow: hidden;
  zoom: 1;
}

#primary.opened {
  max-height: 9999px;
}

@media screen and (min-width: 40em) {
  .js #primary {
    position: relative;
  }
  .js...

JavaScript

/*! responsive-nav.js v1.0.20
 * https://github.com/viljamis/responsive-nav.js
 * http://responsive-nav.com
 *
 * Copyright (c) 2013 @viljamis
 * Available under the MIT license
 */

/* jshint strict:false, forin:false, noarg:true, noempty:true, eqeqeq:true,
boss:true, bitwise:true, browser:true, devel:true, indent:2 */
/* exported responsiveNav */

var responsiveNav = (function (window, document) {

  var computed = !!window.getComputedStyle;

  // getComputedStyle polyfill
  if (!window.getComputedStyle) {
    window.getComputedStyle = function(el) {
      this.el = el;
      this.getPropertyValue = function(prop) {
        var re = /(\-([a-z]){1})/g;
        if (prop === "float") {
          prop = "styleFloat";
        }
        if (re.test(prop)) {
          prop = prop.replace(re, function () {
            return arguments[2].toUpperCase();
          });
        }
        return el.currentStyle[prop] ? el.currentStyle[prop] : null;
      };
      return this;
    };
  }

  var nav,
    opts,
    navToggle,
    styleElement = document.createElement("style"),
    hasAnimFinished,
    navOpen,

    // fn arg can be an object or a function, thanks to handleEvent
    // read more at: http://www.thecssninja.com/javascript/handleevent
    addEvent = function (el, evt, fn, bubble) {
      if ("addEventListener" in el) {
        // BBOS6 doesn't support handleEvent, catch and polyfill
        try {
          el.addEventListener(evt, fn, bubble);
        } catch (e) {
          if (typeof fn === "object" && fn.handleEvent) {
            el.addEventListener(evt, function (e) {
              // Bind fn as this and set first arg as event object
              fn.handleEvent.call(fn, e);
            }, bubble);
          } else {
            throw e;
          }
        }
      } else if ("attachEvent" in el) {
        // check if the callback is an object and contains handleEvent
        if (typeof fn === "object" && fn.handleEvent) {
          el.attachEvent("on" + evt,...