JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<script src="http://s.codepen.io/assets/libs/modernizr.js"></script>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
    
    <style>
      .list-unstyled li a{
        font-size: 13px;
      }
    </style>
  </head>
  
  <body>
    <div class="navigation">      
      <div id="menuzord" class="menuzord red">
        <a href="javascript:void(0)" class="menuzord-brand">Brand Name</a>
        <ul class="menuzord-menu menuzord-left menuzord-indented scrollable">
          <li>
            <a href="javascript:void(0)">Group 1</a>
            <ul class="dropdown">
              <li><a href="#">Lorem ipsum dolor</a></li>
              <li><a href="#">Sit amet consectetur</a></li>
              <li><a href="#">Adipisicing elit quaerat</a></li>
              <li><a href="#"><span class="label label-info">Confirm</span> Veniam eveniet ut quo</a></li>
              <li><a href="#"><span class="label label-info">Confirm</span> Ut a quae et tenetur</a></li>
              <li><a href="#"><strong><i class="fa fa-plus"></i> Add new Quasi quae laboriosam</strong></a></li>
            </ul>
          </li>
          <li>
            <a href="javascript:void(0)">Group 2</a>
            <ul class="dropdown">
              <li><a href="#">Lorem ipsum dolor</a></li>
              <li><a href="#"><strong><i class="fa fa-plus"></i> Add new Quasi quae laboriosam</strong></a></li>
            </ul>
          </li>
          <li><a href="#">Verify</a></li>
        </ul>

        <ul...

CSS

@import "compass/css3";

/* menuzord import */

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700);.menuzord,.menuzord *{font-family:'Open Sans',sans-serif;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}.menuzord{width:100%;padding:0 30px;float:left;position:relative;background:#fff}.menuzord a{-o-transition:color .3s linear,background .3s linear;-moz-transition:color .3s linear,background .3s linear;-webkit-transition:color .3s linear,background .3s linear;transition:color .3s linear,background .3s linear}.menuzord-menu.scrollable>.scrollable-fix{display:none}.menuzord-brand{margin:18px 30px 0 0;float:left;color:#666;text-decoration:none;font-size:24px;font-weight:600;line-height:1.3;cursor:pointer}.menuzord-menu{margin:0;padding:0;float:left;list-style:none}.menuzord-menu.menuzord-right{float:right}.menuzord-menu>li{display:inline-block;float:left}.menuzord-menu>li>a{padding:26px 16px;display:inline-block;text-decoration:none;font-size:14px;font-weight:600;color:#888;outline:0;line-height:1.42857143;-webkit-tap-highlight-color:transparent}.menuzord-menu>li.active>a,.menuzord-menu>li:hover>a{color:#333}.menuzord-menu ul.dropdown,.menuzord-menu ul.dropdown li ul.dropdown{list-style:none;margin:0;padding:0;display:none;position:absolute;z-index:99;min-width:180px;white-space:nowrap;background:#fff}.menuzord-menu ul.dropdown li ul.dropdown{left:100%}.menuzord-menu ul.dropdown li{clear:both;width:100%;border:0;font-size:12px;position:relative}.menuzord-menu ul.dropdown li a{width:100%;background:0 0;padding:10px 25px 10px 22px;color:#888;text-decoration:none;display:inline-block;float:left;clear:both;position:relative;outline:0;-o-transition:padding .2s linear;-moz-transition:padding .2s linear;-webkit-transition:padding .2s linear;transition:padding .2s linear}.menuzord-menu ul.dropdown li:hover>a{padding-left:28px;padding-right:19px;color:#333}.menuzord-menu...

JavaScript

/*
Item name: Menuzord - Responsive Megamenu
Author: marcoarib - [email protected]
License: http://codecanyon.net/licenses
*/

(function($){

  jQuery.fn.menuzord = function(options){
    var settings;
    $.extend( settings = {
      showSpeed: 300,
      hideSpeed: 300,
      trigger: "hover",
      showDelay: 0,
      hideDelay: 0,
      effect: "fade",
      align: "left",
      responsive: true,
      animation: "none",
      indentChildren: true,
      indicatorFirstLevel: "+",
      indicatorSecondLevel: "+",
      scrollable: true,
      scrollableMaxHeight: 400
    }, options);

    // variables
    var menu_container = $(this);
    var menu = $(menu_container).children(".menuzord-menu");
    var menu_li = $(menu).find("li");
    var showHideButton;
    var mobileWidthBase = 768;
    var bigScreenFlag = 2000; // a number greater than "mobileWidthBase"
    var smallScreenFlag = 200; // a number less than "mobileWidthBase"

    // dropdown/megamenu indicators
    $(menu).children("li").children("a").each(function(){
      if($(this).siblings(".dropdown, .megamenu").length > 0){
        $(this).append("<span class='indicator'>" + settings.indicatorFirstLevel + "</span>");
      }
    });
    $(menu).find(".dropdown").children("li").children("a").each(function(){
      if($(this).siblings(".dropdown").length > 0){
        $(this).append("<span class='indicator'>" + settings.indicatorSecondLevel + "</span>");
      }
    });

    // navigation alignment
    if(settings.align == "right"){
      $(menu).addClass("menuzord-right");
    }

    // dropdown indentation (mobile mode)
    if(settings.indentChildren){
      $(menu).addClass("menuzord-indented");
    }

    // responsive behavior
    if(settings.responsive){
      $(menu_container).addClass("menuzord-responsive").prepend("<a href='javascript:void(0)' class='showhide'><em></em><em></em><em></em></a>");
      showHideButton = $(menu_container).children(".showhide");
    }

    // scrollable menu
   ...