JSFiddle - React, Tailwind, and code Playground

by palaceslittle

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js&quot;"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.18/jquery.touchSwipe.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css">
 <!-- Dash Navbar Top -->
  <nav class="navbar navbar-light bg-faded navbar-static-top dash-navbar-top nb-visible">
  <button class="nb-btn-toggle">
          <span class="fa fa-bars"></span>
  </button>
  <form class="form-inline float-xs-right">
    <input class="form-control" type="text" placeholder="Search">
  </form>
</nav>

    <!-- Dash Navbar Left -->
    <div class="dash-navbar-left nb-visible">
      <a class="navbar-brand" href="#">Navbar</a>

      <p class="nb-nav-title">Home</p>
      <ul class="nb-nav">
        <li>
          <a class="collapsed" data-toggle="collapse" href="#collapseStatistics" aria-expanded="false" aria-controls="collapseStatistics">
            <span class="glyphicon glyphicon-stats nb-link-icon"></span>
            <span class="nb-link-text">Statistics</span>
            <span class="fa fa-angle-up nb-btn-sub-collapse"></span>
          </a>
          <!-- Dropdown level one -->
          <ul class="nb-sub-one collapse" id="collapseStatistics">
            <li>
              <a href="#">
                <span class="fa fa-clock-o nb-link-icon"></span>
                <span class="nb-link-text">Daily</span>
              </a>
            </li>
            <li>
              <a href="#">
                <span class="fa fa-history nb-link-icon"></span>
                <span class="nb-link-text">Annual</span>
              </a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">
            <span...

CSS

/* Global
/ -------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
/* Dash Navbar Top = dnt
/ -------------------------------------------------- */
.dash-navbar-top {
  margin-bottom: 0;
  min-height: 61px;
  padding-top: 0;
  padding-bottom: 0;
  border-radius: 0;
  line-height: 1;
}
.dash-navbar-top .nb-btn-toggle {
  position: absolute;
  left: 16px;
  top: 13.5px;
  font-size: 21px;
  background-color: red;
  border-width: 0;
  color: red;
  outline: 0;
}
@media (min-width: 768px) {
  .dash-navbar-top.nb-visible .nb-btn-toggle {
    display: none;
  }
}

.dash-navbar-top .navbar-toggle {
  border-width: 0;
  font-size: 24px;
  color: #d3d1dd;
  padding: 0 10px;
  margin-top: 14px;
  margin-right: 15px;
}
.dash-navbar-top .navbar-toggle:hover,
.dash-navbar-top .navbar-toggle:focus {
  background-color: transpardnt;
}


/* Dash Navbar Left = nb
/ -------------------------------------------------- */
.dash-navbar-left {
  position: absolute;
  background-color: #2A2D35;
  width: 250px;
  top: 0;
  bottom: 0;
  overflow-y: auto;
  z-index: 999;
  padding-top: 5px;
  -webkit-transition: left 300ms;
  -o-transition: left 300ms;
  transition: left 300ms;
}
.navbar-brand{
  display: block;
  background: orange;
  width: 100%;
  color: #FFF;
  text-transform: uppercase;
  padding: 0 20px;
  margin:-10px 0 30px 0;
  height: 65px;
  line-height: 65px;
}
.navbar-brand:hover{
  color: #FFF;
}
.navbar .form-inline{
  margin-top: 12px;
}
.navbar .btn{
  background: orange;
  color: #FFF;
}
@media (max-width: 767px) {
  .dash-navbar-left.nb-visible {
    left: -250px;
  }
  .dash-navbar-left.nb-visible.nb-show {
    left: 0;
  }
}
.dash-navbar-left.nb-hidden {
  left: -250px;
}
.dash-navbar-left.nb-hidden.nb-show {
  left: 0;
}
.dash-navbar-left .nb-nav-title {
  text-transform: uppercase;
  color: #7f799c;
  border-bottom: 1px solid rgba(255,152,0,0.1);
  padding: 10px 25px;
  font-size: 11px;
  letter-spacing:...

JavaScript

(function(){
  "use strict";

  // Navbar left
  // -------------------------------------------------

  	// Variables
		  var nb                = $(".dash-navbar-left"),
					nbBtnToggle       = $(".nb-btn-toggle"),
					nbBtnCollapse     = $(".nb-btn-collapse"),
					contentWrap        = $(".content-wrap"),
					contentWrapEffect  = contentWrap.data("effect"),
					windowHeight       = $(window).height() - 61,
					windowWidth        = $(window).width() < 767;

		// Functions
			function cwShowOverflow() {
				if ( windowWidth ) {
						contentWrap.css({
						height : windowHeight ,
						overflow : 'hidden'
					});
					$( 'html, body' ).css( 'overflow', 'hidden' );
				}
			}

			function cwHideOverflow() {
				if ( windowWidth ) {
					contentWrap.css({
						height : 'auto' ,
						overflow : 'auto'
					});
					$( 'html, body' ).css( 'overflow', 'auto' );
				}
			}

			function nbShow() {
				nb.addClass("nb-show").removeClass("nb-hide");
				contentWrap.addClass(contentWrapEffect);
				cwShowOverflow();
				nbBtnToggle.find("span").removeClass("fa-bars").addClass("fa-arrow-left");
			}

			function nbHide() {
				nb.removeClass("nb-show").addClass("nb-hide");
				contentWrap.removeClass(contentWrapEffect);
				cwHideOverflow();
				nbBtnToggle.find("span").removeClass("fa-arrow-left").addClass("fa-bars");
			}

		// Toggle the edge navbar left
			nb.addClass("nb-hide");
			nbBtnToggle.click( function() {
				if( nb.hasClass("nb-hide") ) {
					nbShow();
				} else {
					nbHide();
				}
			});

		// Collapse the dash navbar left subnav
			nbBtnCollapse.click( function(e) {
				e.preventDefault();
				if( nb.hasClass("nb-collapsed") ) {
					nb.removeClass("nb-collapsed");
					contentWrap.removeClass("nb-collapsed");
					$(this).find(".nb-link-icon").removeClass("fa-arrow-right").addClass("fa-arrow-left");
				} else...