JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="nav">
            <a href="/" class="nav_trigger">menu</a>
						<ul class="nav_menu">
							<li class="nav_item"><a href="#about" class="nav_link">About Us</a></li>
							<li class="nav_item"><a href="#service" class="nav_link">Our Focus</a></li>
							<li class="nav_item"><a href="#portfolio" class="nav_link">Portfolio</a></li>
							<li class="nav_item"><a href="#people" class="nav_link">Our Team</a></li>
							<li class="nav_item"><a href="#steps" class="nav_link">Work Steps</a></li>
							<li class="nav_item"><a href="#pricing" class="nav_link">Pricing</a></li>
							<li class="nav_item"><a href="#testimonials" class="nav_link">Testimonials</a></li>
							<li class="nav_item"><a href="#blog" class="nav_link">Blog</a></li>
							<li class="nav_item"><a href="#contact" class="nav_link">Contact</a></li>
						</ul>
					</nav>

CSS

.nav_menu {
  margin: 15px 0 0;
  padding: 0;
  text-align: right;
  background-color: gray;
}
.nav_item {
  list-style-type: none;
  display: inline-block;
  margin-left: 10px;
}
.nav_item:nth-child(1) {
  margin-left: 0;
}
.nav_link {
  color: #fefefe;
  font-size: 14px;
  text-transform: uppercase;
  font-family: "poppins-medium", sans-serif;
  text-decoration: none;
}
.nav_link:hover, .nav_link:focus {
   text-decoration: none;
  color: #fc5f45;
}
.nav_trigger {
  display: none;
}

.nav_menu{
  display: block;
}


@media only screen and (max-width : 992px) {
	.nav_trigger{
		display: block;
	}
	
	.nav_menu{
		display: none;
	}
  
  .nav_item{
  display: block;
  text-align: center;
  margin: 0;
  border-bottom: 1px solid #ececec;
}
.nav_item:hover{
  background-color: #ececec;
  color: #000;
}

JavaScript

$('.nav_trigger').click(function(e){
	e.preventDefault();
  $('.nav_menu').slideToggle(300);
});