JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main-navigation-wrapper">
            <nav role="navigation" class="site-navigation main-navigation">
                <h1 class="assistive-text">Menu</h1>
                <div class="assistive-text skip-link"><a href="#content" title="Skip to content">Skip to content</a></div>

                <ul id="top-navbar">
                    <li class="float-left top-menu">
                        <a class="top-menu-link" href="/channels/" data-toggle="collapse" data-parent="#top-navbar" data-target="#channels-menu-item-container" onclick="return false;"><i class="icon-monitor"></i> Channels</a>
                        <div id="channels-menu-item-container" class="collapse">
                            <div id="channels-menu-item-wrapper">
                                <ul id="nav-channels" class="float-left">
                                    <li class="first"><a href="/channel/tech/">Technology</a></li>
                                    <li><a href="/channel/web/">Web</a></li>
                                    <li><a href="/channel/startups/">Startups</a></li>
                                    <li><a href="/channel/happening-now/">Happening Now</a></li>
                                </ul>
                                <ul id="nav-topics" class="float-left">
                                    <li class="nav-menu-item-head">HOT TOPICS</li>
                                    <li><a href="/topic/gadgets/">Gadgets</a></li>
                                    <li><a href="/topic/mobile/">Mobile</a></li>
                                    <li><a href="/topic/apps-software/">Apps &amp; Software</a></li>
                                    <li><a href="/topic/google/">Google</a></li>
                                    <li><a href="/topic/microsoft/">Microsoft</a></li>
                                    <li><a href="/topic/amazon/">Amazon</a></li>
                                    <li><a href="/topic/asus/">ASUS</a></li>
                            ...

CSS

/*
Theme Name: What The One
Theme URI: http://whatthenerd.com/
Author: WTN
Description: What The Nerd's Theme For 2013 (Codename: wtone)
Version: 0.1
Tags:
*/

/* --------------------------------------------------------------------------

VERSIONS:s

HTML5 Boilerplate 4.0.2
    Normalize.css 1.0.2
Twitter Bootstrap 2.2.2


INDEX:

BASE CSS
    WEB FONTS
    NORMALIZE.CSS
    GLOBAL DEFAULTS
        Custom Global Defaults
    GLOBAL HELPER CLASSES

ENTER THE DRAGON (THE MAIN DEAL)
    TOP / PRIMARY NAVBAR

MEDIA QUERIES (RESPONSIVE DESIGN, PRINT)
    LARGE DESKTOP (1200px and up)
        Helper Classes
    PORTRAIT TABLET TO LANDSCAPE AND DESKTOP (768px and above)
        Helper Classes
    LANDSCAPE PHONE TO PORTRAIT TABLET (767px and below)
        Helper Classes
    LANDSCAPE PHONES AND DOWN (480px and below)
        Helper Classes
    PRINT STYLES
        Helper Classes


TO DOs:

1. Check if self-hosted fonts are being served with proper mime types.
    EOT:  application/vnd.ms-fontobject
    WOFF: application/x-font-woff
    TTF:  application/x-font-ttf
    SVG:  image/svg+xml

2. Use classes like .visible-phone, .visible-tablet,
.visible-desktop, .hidden-phone, .hidden-tablet, .hidden-desktop,
.visible-print, .hidden-print, etc. with relevant @media queries

-------------------------------------------------------------------------- */

/* TOP / PRIMARY NAVBAR
-------------------------------------------------------------------------- */

/* Defaults */
.collapse {
    position: relative;
    height: 0;
    overflow: hidden;
    -webkit-transition: height 0.35s ease;
    -moz-transition: height 0.35s ease;
    -o-transition: height 0.35s ease;
    transition: height 0.35s ease;
}
.collapse.in {
    height: auto;
}

/* Custom */
#main-navigation-wrapper {
    position: fixed;
    top: 0;
    margin-bottom: 0;
    overflow: visible;
    width: 100%;
    z-index: 1000;
    margin: 0;
    padding: 0;
    font: normal normal bold 17px/1.5 'Open Sans',...