JSFiddle - React, Tailwind, and code Playground

HTML

<div id="mobile-nav" class="show-element">
			 <div class="menu-mobile-navigation-container">
				 <ul class="mobile-nav-menu" id="menu-mobile-navigation">
			 
				<li class="mobile-level-two-click menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-695" id="menu-item-695">
					<a href="#">Level 1</a>
					<ul class="sub-menu">
						<li class="mobile-menu-back-button menu-item menu-item-type-custom menu-item-object-custom menu-item-699" id="menu-item-699"><a href="#">Back</a></li>
						<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-698" id="menu-item-698">
							<a href="http://www.example.com/">Example</a>
							<ul class="sub-menu">
								<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-700" id="menu-item-700"><a href="#">Sub page 1</a></li>
								<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-701" id="menu-item-701"><a href="#">Sub page 2</a></li>
							</ul>
						</li>
					</ul>
				</li>
				<li class="mobile-level-two-click menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-696" id="menu-item-696">
					<a href="#">Level 1</a>
					<ul class="sub-menu">
						<li class="mobile-menu-back-button menu-item menu-item-type-custom menu-item-object-custom menu-item-702" id="menu-item-702"><a href="#">Back</a></li>
						<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-704" id="menu-item-704">
							<a href="http://www.example.com/">Example</a>
							<ul class="sub-menu">
								<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-703" id="menu-item-703"><a href="#">Sub page 1</a></li>
							</ul>
						</li>
					</ul>
				</li>
				<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-697" id="menu-item-697">
					<a...

CSS

.mobile-nav-menu {
  left: 0;
  list-style: outside none none;
  margin-left: 0;
  position: relative;
  transition: all 0.75s ease 0s;
}

.mobile-nav-menu.left-one { 
	-webkit-animation: move_left .75s ease 0s 1 forwards;
	-moz-animation: move_left .75s ease 0s 1 forwards;
	-o-animation: move_left .75s ease 0s 1 forwards;
	-ms-animation: move_left .75s ease 0s 1 forwards;
	animation: move_left .75s ease 0s 1 forwards;
 }

#mobile-nav .sub-menu {
  display: none;
  height: auto;
  left: 100%;
  margin-left: 0;
  position: absolute;
  width: 100%;
}

#mobile-nav .sub-menu .sub-menu {
  position: relative !important;
  float: left;
}
.mobile-selected .sub-menu {
 display:block !important;
}

.mobile-nav-menu {
 transition:.75s ease 0s all;		
  left: 0%;
  list-style: outside none none;
  margin-left: 0;
  position: relative;
  transition:.75s ease 0s all;  
}

#mobile-nav .sub-menu li {
  float: left;
  height: auto !important;
  position: relative;
  width: 100% !important;
}

@-webkit-keyframes move_left {
     from { left:0%;} 
     to {left:-100%;} 
}

@keyframes move_left {
     from { left:0%;} 
     to {left:-100%;} 
}
 @-moz-keyframes move_left {
     from { left:0%;} 
     to {left:-100%;} 
}

 @-ms-keyframes move_left {
     from { left:0%;} 
     to {left:-100%;} 
}

 @-o-keyframes move_left {
     from { left:0%;} 
     to {left:-100%;} 
}

JavaScript

jQuery(document).ready(function(){
	jQuery(document).on( 'click', '.mobile-level-two-click > a', function( event ) {
		jQuery('.mobile-nav-menu').addClass('left-one');
		jQuery(this).parent().siblings().removeClass('mobile-selected');		
		jQuery(this).parent().addClass('mobile-selected');
	});
	
	jQuery(document).on( 'click', '.mobile-menu-back-button', function( event ) {
		jQuery('.mobile-nav-menu').removeClass('left-one');

	});	
	
});