JSFiddle - React, Tailwind, and code Playground

HTML

<header class="navbar nav-main navbar-fixed-top" role="banner">
          <ul class="nav nav--right">
            <li class="v-button--slide-right" id="toggle-menu">
              <button class="mpp-menu-icon mpp-menu-icon--cross toggle-menu">
                <span class="toggle"></span>
                <span class="menu">menu</span>
              </button>
            </li>
          </ul>
          <nav id="menu--slide-right" class="nav menu--slide-right">
            <ul class="main-menu">
              <li><a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Contact</a></li>  
        </ul>            
      </nav>
    </header>

CSS

.nav-main .navbar-header {
  float: left;
  display: inline-block;
}


.nav-main .nav--right {
  display: inline-block;
  float: right;
}


.nav-main .nav--right .mpp-menu-icon {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  width: 77px;
  height: 95px;
  text-indent: -9999px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: medium none;
  cursor: pointer;
  -webkit-transition: background 0.2s;
  transition: background 0.2s;
}

.nav-main .nav--right .mpp-menu-icon span.toggle {
  display: block;
  position: absolute;
  top: 35px;
  left: 18px;
  right: 18px;
  height: 4px;
}

.nav-main .nav--right .mpp-menu-icon span.toggle:before, .nav-main .nav--right .mpp-menu-icon span.toggle:after {
  position: absolute;
  display: block;
  left: 0;
  width: 100%;
  height: 4px;
  content: "";
}

.nav-main .nav--right .mpp-menu-icon span.toggle:before {
  top: -12px;
}

.nav-main .nav--right .mpp-menu-icon span.toggle:after {
  bottom: -12px;
}

.nav-main .nav--right li {
  display: inline-block;
  float: left;
}

.nav-main .nav--right li.v-button--slide-right .mpp-menu-icon--cross:before {
  content: "";
  height: 100%;
  left: -16px;
  position: absolute;
  top: -95px;
  width: 1px;
  -webkit-transition-delay: 0.3s, 0s;
  transition-delay: 0.3s, 0s;
}

.nav-main .nav--right li.v-button--slide-right .mpp-menu-icon--cross span.toggle {
    background-color: #c40000;
  -webkit-transition: background 0s 0.3s;
  transition: background 0s 0.3s;
}

.nav-main .nav--right li.v-button--slide-right .mpp-menu-icon--cross span.toggle:before, .nav-main .nav--right li.v-button--slide-right .mpp-menu-icon--cross span.toggle:after {
    background-color: #c40000;
  -webkit-transition-duration: 0.3s, 0.3s;
  transition-duration: 0.3s, 0.3s;
  -webkit-transition-delay: 0.3s, 0s;
  transition-delay: 0.3s, 0s;
}

.nav-main .nav--right li.v-button--slide-right .mpp-menu-icon--cross span.toggle:before {
  -webkit-transition-property: top,...

JavaScript

jQuery(document).ready(function($) {

    var openSidebar = function(){
    $('.menu--slide-right').addClass('is-active');
    $('.toggle-menu').addClass('is-active');
    $('#toggle-menu').addClass('toggle-close');
}
var closeSidebar = function(){
    $('.menu--slide-right').removeClass('is-active');
    $('.toggle-menu').removeClass('is-active');
    $('#toggle-menu').removeClass('toggle-close');
}

$('.toggle-menu').click( function(event) {
    event.stopPropagation();
    openSidebar();
});

$(document).click( function(event){
    if ( !$(event.target).closest('.menu--slide-right').length ) {
        closeSidebar();   
    }
});
});