JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
<nav id="menu">
<ul id="nav">                  
<li><span class="dashboard"></span> 
<a href="" class="active">Dashboard</a></li>                   
<li><span class="pricing"></span> 
<a href="">Order</a>
<ul>
<li><a href="">All Order</a></li>
<li><a href="">Invoice</a></li>
</ul>
</li>
</ul>
</nav>

CSS

#menu{
    padding: 0px;
    margin: 0px;
}

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

#menu li{
    padding: 17px;
    border-bottom: solid 1px rgb(240, 240, 240);
    background-color: rgb(246, 246, 246);
}

#menu ul ul{
    margin: 17px 0 0 0;
}

#menu ul ul li{
    border-bottom: none;
}

.active{
    background-color: rgb(148, 203, 68);
    color: rgb(255, 255, 255);
    margin: -17px;
    padding: 17px;
}

.active a{
    text-decoration: none;
    color: rgb(255, 255, 255);
}

.active a:hover{
    text-decoration: none;
    color: rgb(255, 255, 255);
}

#menu a{
    text-decoration: none;
    color: rgb(65, 71, 81);
}
#nav { 
  display: block; 
  margin: 0 auto; 
}

#nav li { }

#nav > li > a { 
  display: block; 
  color: rgb(65, 71, 81);
  text-decoration: none;
}
#nav > li > a:hover, #nav > li > a.open { 
  color: rgb(65, 71, 81);
}

#nav li ul { display: none; background: #4a5b78;}

#nav li ul li a { 
  display: block; 
  background: none;
  padding: 5px 0px;
  padding-left: 30px;
  text-decoration: none;
  color: rgb(65, 71, 81);
}
#nav li ul li a:hover {
  background: none;
}

JavaScript

$(document).ready(function(){
  $("#nav > li > a").on("click", function(e){
    if($(this).parent().has("ul")) {
      e.preventDefault();
    }
    
    if(!$(this).hasClass("active")) {
      // hide any open menus and remove all other classes
      $("#nav li ul").slideUp(350);
      $("#nav li a").removeClass("active");
      
      // open our new menu and add the open class
      $(this).next("ul").slideDown(350);
      $(this).addClass("active");
    }
    
    else if($(this).hasClass("active")) {
      $(this).removeClass("active");
      $(this).next("ul").slideUp(350);
    }
  });
});