JSFiddle - React, Tailwind, and code Playground

HTML

<div class="nav-wrap">

<nav id="nav-main">
		    <ul>
          <li><a href="index.php">Home</a></li>
          <li><a href="products.php">Products</a></li>
            <ul>
              <li>Product One</li>
              <li>Product Two</li>
              <li>Product Three</li>
            </ul>
          <li><a href="trade-processing.php">Trade Processing</a></li>
		    </ul>
		</nav>

		<div id="nav-trigger">
		    <span>Menu</span>
		</div>
		<!--Close Trigger-->

		<nav id="nav-mobile"></nav>
    <!--Close Trigger-->
   </div>

CSS

/* Menu Wrappers */

.nav-wrap {
	position:fixed;
	top:0px;
	left:0px;
	width:150px;
	padding:25px;
	background: #ffffff;
	z-index:2;
	height: 100%;

	-webkit-box-shadow: 0px 0px 4px 0px rgba(50, 50, 50, 0.5);
	-moz-box-shadow:    0px 0px 4px 0px rgba(50, 50, 50, 0.5);
	box-shadow:         0px 0px 4px 0px rgba(50, 50, 50, 0.5);
}


/* =Nav
-------------------------------------------------------------- */
#nav-trigger {
  display: none;
  text-align: center;
}

#nav-trigger span {
    display:inline-block;
    width:auto;
    height:40px;
    border:0px;
    padding:0px 15px;

    font-family: 'montserratregular';
    font-size:16px;
    line-height:40px;
    color:#363940;

    background-color:#e8eaec;
    cursor:pointer;

    position:absolute;
    bottom:23px;
    right:25px;


    transition: all .15s ease-in-out;
	-moz-transition: all .15s ease-in-out;
	-webkit-transition: all .15s ease-in-out;
}

#nav-trigger span:before {
	background-image: url('../images/trigger.svg');
    content:"";
    padding-right: 10px;
    padding-left: 12px;
    background-position: left center;
    background-size: 16px 13px;
    background-repeat: no-repeat;
}

nav {
    height:auto;
    width:auto;
    display:inline-block;

    font-family: 'montserratlight';
    font-size:14px;
    line-height:45px;
    color:#363940;
}

nav#nav-main {
    padding: 0px;
    height:auto;
}

nav#nav-main ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin-bottom:10px;
}

nav#nav-main li {
    display: inline-block;
    width:100%;
}

nav#nav-main li:last-child {
    border-right: none;
    margin-top:20px;
}

nav#nav-main a {
    display: block;
    width:100%;
    height:45px;
    text-decoration:none;
    cursor: pointer;
    color:#363940;

    display: inline-block;
	vertical-align: middle;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-backface-visibility: hidden;
	backface-visibility:...

JavaScript

$(document).ready(function(){
    $("#nav-mobile").html($("#nav-main").html());
    $("#nav-trigger span").click(function(){
        if ($("nav#nav-mobile ul").hasClass("expanded")) {
            $("nav#nav-mobile ul.expanded").removeClass("expanded").slideUp(400);
            $(this).removeClass("open");
        } else {
            $("nav#nav-mobile ul").addClass("expanded").slideDown(400);
            $(this).addClass("open");
        }
    });
});