JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<div id="page">  
  <div class="wrap">
    <header id="header" class="row cf">
      <nav id="top-nav" class="dropdown cf">
        <ul class="dropdown menu">
          <li><a href="#">Contact Us</a></li>
          <li><a href="#">Account</a>
            <ul class="sub-menu">
              <li><a href="#">Preferences</a></li>
              <li><a href="#">Sign out</a></li>
            </ul>
          </li>
          <li><a href="#">Cart (2 items)</a></li>
        </ul>
      </nav>
      <h1>Responsive Menu</h1>
      <button id="primary-nav-button" type="button">Menu</button>
      <nav id="primary-nav" class="dropdown cf">
        <ul class="dropdown menu">
          <li class='active'><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">Store</a>
            <ul class="sub-menu">
              <li><a href="#">Latest Products</a></li>
              <li><a href="#">Shirts</a>
                <ul class="sub-menu">
                  <li><a href="#">Men's</a>
                    <ul class="sub-menu">
                      <li><a href="#">S</a></li>
                      <li><a href="#">M</a></li>
                      <li><a href="#">L</a></li>
                      <li><a href="#">XL</a></li>
                    </ul>
                  </li>
                  <li><a href="#">Women's</a></li>
                </ul>
              </li>
              <li><a href="#">Toys</a>
                <ul class="sub-menu">
                  <li><a href="#">3+</a></li>
                  <li><a href="#">10+</a></li>
                  <li><a href="#">15+</a></li>
                </ul>
              </li>
              <li><a href="#">Books</a></li>
            </ul>
          </li>
          <li><a href="#">Social</a>
            <ul class="sub-menu">
              <li><a href="#">Twitter</a></li>
              <li><a href="#">Facebook</a></li>
              <li><a href="#">RSS</a></li>
           ...

CSS

body {
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 1.25;
  margin: 0;
  padding: 0;
  background: #f5f5f5;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Micro Clearfix */
.cf:before, 
.cf:after {
	content: '';
	display: table;
	visibility: hidden;
}

.cf:after {
	clear: both;
}

.cf {
	*zoom: 1;
}

.wrap {
  text-align: center;
}

.row {
  max-width: 800px;
  margin: 0 auto;
  text-align: left;
  overflow: hidden;
  width: 96%;
}

#header {
  overflow: visible;
  position: relative;
}

#header h1 {
  margin: 5px 0;
}

#primary-nav-button {
  background: transparent;
  display: none;
  border: 1px solid #aaa;
  position: absolute;
  bottom: 5px;
  right: 0;
  padding: 0;
  text-decoration: none;
  color: #333;
  text-align: center;
  font-weight: bold;
  font-size: 0;
}

#primary-nav-button:hover {
  background: rgba(0,0,0,0.05);
}

#primary-nav-button.selected {
  background: rgba(0,0,0,0.1);
}

#primary-nav-button:before {
  /* content: '☰'; */
  content: '\2261';
  display: block;
  font-size: 36px;
  font-style: normal;
  font-weight: normal;
  line-height: 1.05;
  height: 1em;
  width: 1em;
  color: inherit;
  speak: none;
}

.menu li {
  float: left;
  margin-right: 10px;
  position: relative;
}

.menu li:last-child {
  margin-right: 0;
}

.menu .sub-menu li {
  width: 100%;
}

.menu li a {
  display: block;
  text-decoration: none;
}

#top-nav li a {
  color: #8CC152;
  padding: 5px 0;
}

#top-nav .sub-menu {
  background: #fff;
}

#top-nav .sub-menu li a {
  padding: 5px;
}

#top-nav .sub-menu li > a:hover,
#top-nav .sub-menu li.selected > a {
  background: #8CC152;
  color: #000;
}

#primary-nav li a {
  color: #333;
  font-weight: bold;
  padding: 10px;
}

#primary-nav li.active > a,
#primary-nav li > a:hover,
#primary-nav li.selected > a {
  background: #8CC152;
  color: #000;
}

.downarrow {
  	background: none;
  display: inline-block;
	  padding: 0;
  	text-align: center;
  min-width: 3px;
}

.sub-menu...

JavaScript

/**
 * jquery.responsive-menu.js
 * jQuery + CSS Multi Level Responsive Menu
 */

jQuery(function($) {
  $.fn.responsivenav = function(args) {
    // Default settings
    var defaults = {
      responsive: true,
      width: 480,                           // Responsive width
      button: $(this).attr('id')+'-button', // Menu button id
      animation: {                          // Menu animation
        effect: 'slide',                    // Accepts 'slide' or 'fade'
        show: 150,
        hide: 100
      },
      selected: 'selected',                 // Selected class
      arrow: 'downarrow'                    // Dropdown arrow class
    };
    var settings = $.extend(defaults, args);
    
    // Initialize the menu and the button
    init($(this).attr('id'), settings.button);
    
    function init(menuid, buttonid) {
      setupMenu(menuid, buttonid);
      // Add a handler function for the resize and orientationchange event
      $(window).bind('resize orientationchange', function(){ resizeMenu(menuid, buttonid); });
      // Trigger initial resize
      resizeMenu(menuid, buttonid);
    }
    
    function setupMenu(menuid, buttonid) {
      var $mainmenu = $('#'+menuid+'>ul');
      
      var $headers = $mainmenu.find("ul").parent();
      // Add dropdown arrows
      $headers.each(function(i) {
        var $curobj = $(this);
        $curobj.children('a:eq(0)').append('<span class="'+settings.arrow+'"></span>');
      });
      
      if ( settings.responsive ) {
        // Menu button click event
        // Displays top-level menu items
        $('#'+buttonid).click(function(e) {
          e.preventDefault();
          
          if ( isSelected($('#'+buttonid)) ) {
            // Close menu
            collapseChildren('#'+menuid);
            animateHide($('#'+menuid), $('#'+buttonid));
          } else {
            // Open menu
            animateShow($('#'+menuid), $('#'+buttonid));
          }
        });
      }
    }
    
    function...