JSFiddle - React, Tailwind, and code Playground

by Donavon Lerman

HTML

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<header>
            <div class="container">

    <nav class="">
        <button type="button" class="btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>

    </nav>        
        </header>

CSS

nav.open ul {
    display: block;
  }
  nav .btn-navbar {
    margin: 9px 0 0;
    background: rgba(0, 0, 0, 0.1);
    padding-top: 14px;
    padding-bottom: 14px;
  }
  nav .btn-navbar:hover {
    background: rgba(0, 0, 0, 0.1);
  }
  nav .btn-navbar:active {
    margin-top: 11px;
    padding-bottom: 12px;
  }
  nav .btn-navbar .icon-bar {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    height: 3px;
  }
  nav ul {
    display: none;
    position: absolute;
    right: 0;
    top: 62px;
    width: 190px;
    z-index: 1000;
    background: #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.14);
    -moz-box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.14);
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.14);
  }
  nav ul li {
    float: none !important;
    margin: 0 !important;
  }
  nav ul li a {
    line-height: 1 !important;
    color: #1a85eb !important;
    display: block;
    border-bottom: 2px solid #f3f4f6;
    text-align: center;
    padding: 10px 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  nav ul li a.highlight {
    background: #f3f4f6 !important;
  }
  nav ul li .dropdown-toggle {
    display: none;
  }
  nav ul li .dropdown-menu {
    position: static;
    border: none;
  }
  nav ul li .dropdown-menu a {
    padding: 10px 20px;
    font-weight: bold;
  }
  nav ul li .dropdown-menu a:hover {
    background: #fff;
  }
  nav ul li .dropdown-menu li:last-child a {
    border-bottom: none;
  }
}

JavaScript

$(function(){
    $(".btn-navbar").click(function(){
        $("nav").toggleClass("open");
    });
});