JSFiddle - React, Tailwind, and code Playground

HTML

<nav id="nav-wrap">
						<ul class="menu" id="nav">
							<li>
								<a href="#m1" onclick="return anchorScroller(this)">Для чего</a>
							</li><li>
								<a href="#m2" onclick="return anchorScroller(this)">Как работает</a>
							</li><li>
								<a href="#m3" onclick="return anchorScroller(this)">Тарифы</a>
							</li><li>
								<a href="#m4" onclick="return anchorScroller(this)">Гарантия</a>
							</li><li>
								<a href="#m5" onclick="return anchorScroller(this)">FAQ</a>
							</li><li>
								<a href="#">Войти</a>
							</li>
						</ul>
					</nav>

CSS

#nav-wrap {
		position: relative;
	}
  
	#menu-icon {
		color: #000000;
		display: block;
		clear: both;
	}
	
	#nav {
		clear: both;
		position: absolute;
		width: 100%;
		z-index: 10000;
		background: #254568;
		margin-top: 0px;
		display: none;
	}
	#nav li {
		width: 100%;
		clear: both;
		float: none;
		margin: 8px 0 8px 0px;
	}
	#nav a, 
	#nav ul a {
		letter-spacing: 2px;
		color: #ffffff;
		font: inherit;
		background: none;
		display: inline;
		padding: 0;
		border: none;
	}
	#nav ul {
		width: auto;
		position: static;
		display: block;
		border: none;
		background: inherit;
	}

JavaScript

jQuery(document).ready(function($){
				$('#nav-wrap').prepend('<div id="menu-icon">Меню</div>');
				$("#menu-icon").on("click", function(){
					$("#nav").slideToggle();
					$(this).toggleClass("active");
				});
			});