JSFiddle - React, Tailwind, and code Playground

by its_me

HTML

<div id="top-navbar">
    <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="main-menu-left" class="menu">
            <li class="top-navbar-home menu-item">
                <a title="Go to homepage" rel="home" href="/">
                    <i class="icon-home"></i>
                </a>
            </li>
            <li class="top-navbar-channels menu-item dropdown">
                <a href="#" title="All channels on WTN" onclick="return false;" data-toggle="collapse" data-target=".dropdown-menu">
                    <i class="icon-tasks"></i> Channels                            
                </a>
                <nav class="dropdown-menu collapse" role="menu">

                    <ul id="nav-channels">
                        <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">
                        <li class="nav-menuitem-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>
                        <li class="more-topics"><a href="/channels/">...</a></li>
                    </ul>

                    <ul...

CSS

/* =Navigation Icons
----------------------------------------------- */

[class^="icon-"],
[class*=" icon-"] {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-top: 1px;
  *margin-right: .3em;
  line-height: 14px;
  vertical-align: text-top;
  background-image: url(http://i.imgur.com/UaRHW.png);
  background-position: 14px 14px;
  background-repeat: no-repeat;
}
.icon-white,
.nav-pills > .active > a > [class^="icon-"],
.nav-pills > .active > a > [class*=" icon-"],
.nav-list > .active > a > [class^="icon-"],
.nav-list > .active > a > [class*=" icon-"],
.navbar-inverse .nav > .active > a > [class^="icon-"],
.navbar-inverse .nav > .active > a > [class*=" icon-"],
.dropdown-menu > li > a:hover > [class^="icon-"],
.dropdown-menu > li > a:hover > [class*=" icon-"],
.dropdown-menu > .active > a > [class^="icon-"],
.dropdown-menu > .active > a > [class*=" icon-"],
.dropdown-submenu:hover > a > [class^="icon-"],
.dropdown-submenu:hover > a > [class*=" icon-"],
.open > a > [class*="icon-"],
.open > a > [class*=" icon-"],
#main-menu-left .menu-item:hover > a > [class*="icon-"],
#main-menu-left .menu-item:hover > a > [class*=" icon-"],
#main-menu-right .menu-item:hover > a > [class*="icon-"],
#main-menu-right .menu-item:hover > a > [class*=" icon-"] {
  background-image: url(http://i.imgur.com/AXBJK.png);
}
.icon-search {
  background-position: -48px 0;
}
.icon-home {
    background-position: 0 -24px;
}
.icon-tasks {
  background-position: -384px -144px;
}
.icon-plus {
  background-position: -408px -96px;
}
.aahans {
    position: absolute;
    background-image: url(images/aahans.png);
    bottom: 10px;
    right: 10px;
    height: 21px;
    width: 105px;
}

/* =Menu
----------------------------------------------- */

#top-navbar {
    font: normal normal bold 16px/1.5 'Open Sans', sans-serif;
    margin-bottom: 0;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 1000;
}
#top-navbar a,
#top-navbar a:visited {
   ...

JavaScript

//<![CDATA[

!function ($) {

  "use strict"; // jshint ;_;


  /* CSS TRANSITION SUPPORT (http://www.modernizr.com/)
   * ======================================================= */

  $(function () {

    $.support.transition = (function () {

      var transitionEnd = (function () {

        var el = document.createElement('bootstrap')
          , transEndEventNames = {
               'WebkitTransition' : 'webkitTransitionEnd'
            ,  'MozTransition'    : 'transitionend'
            ,  'OTransition'      : 'oTransitionEnd otransitionend'
            ,  'transition'       : 'transitionend'
            }
          , name

        for (name in transEndEventNames){
          if (el.style[name] !== undefined) {
            return transEndEventNames[name]
          }
        }

      }())

      return transitionEnd && {
        end: transitionEnd
      }

    })()

  })

}(window.jQuery);

!function ($) {

  "use strict"; // jshint ;_;


 /* COLLAPSE PUBLIC CLASS DEFINITION
  * ================================ */

  var Collapse = function (element, options) {
    this.$element = $(element)
    this.options = $.extend({}, $.fn.collapse.defaults, options)

    if (this.options.parent) {
      this.$parent = $(this.options.parent)
    }

    this.options.toggle && this.toggle()
  }

  Collapse.prototype = {

    constructor: Collapse

  , dimension: function () {
      var hasWidth = this.$element.hasClass('width')
      return hasWidth ? 'width' : 'height'
    }

  , show: function () {
      var dimension
        , scroll
        , actives
        , hasData

      if (this.transitioning) return

      dimension = this.dimension()
      scroll = $.camelCase(['scroll', dimension].join('-'))
      actives = this.$parent && this.$parent.find('> .accordion-group > .in')

      if (actives && actives.length) {
        hasData = actives.data('collapse')
        if (hasData && hasData.transitioning) return
        actives.collapse('hide')
        hasData ||...