JSFiddle - React, Tailwind, and code Playground

HTML

<body>
			<div class="mobile-nav">
				<div class="menu-btn" id="menu-btn">
					<div></div>
					<span></span>
					<span></span>
					<span></span>
				</div>
 
				<div class="responsive-menu">
					<ul>
						<li><a href="index.html">Home</a></li>
						<li><a href="about-us.html">About</a></li>
						<li><a href="our-services.html">Services</a></li>
						<li><a href="our-services.html">FAQs</a></li>
						<li><a href="our-services.html">Work</a></li>
						<li><a href="contact-us.html">Contact</a></li>
					</ul>
				</div>
			</div>
</body>

CSS

.menu-btn div {
	position: absolute;
	left: 100%;
	top: 64%;
	padding-right: 8px;
	margin-top: -0.50em;
	line-height: 1.2;
	font-size: 18px;
	font-weight: 200;
	vertical-align: middle;
	z-index: 99;
}

.menu-btn span {
	display: block;
	width: 19px;
	height: 3px;
	margin: 4px 0;
	background: rgb(0,0,0);
	z-index: 99;
}

.responsive-menu{
	display: none;
}

.expand {
	display: block !important; 
}

JavaScript

$('.menu-btn' )
  .click(function(){
    $('.menu-btn').toggleClass('btn-none');
    $('.responsive-menu').toggleClass('expand');
  });