JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="toggle-menu hidden-lg hidden-md"><span></span></a>

<nav class="hidden-menu">
	<ul>
    <li><a href="#header">Главная</a></li>
    <li><a href="#services">Услуги</a></li>
    <li><a href="#rewards">Заслуги</a></li>
    <li><a href="#colleagues">Коллеги</a></li>
    <li><a href="#partners">Наши партнеры</a></li>
    <li><a href="#contacts">Контакты</a></li>
	</ul>
</nav>

CSS

.toggle-menu {
    display: block;
    width: 28px;
    height: 28px;
    margin-top: 14px;
}

.toggle-menu span, .toggle-menu span:after, .toggle-menu span:before {
    width: 100%;
    height: 2px;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    background-color: #f39f18;
    position: relative;
    display: block;
}

.toggle-menu span, .toggle-menu span:after, .toggle-menu span:before {
    width: 100%;
    height: 2px;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    background-color: #f39f18;
}

.toggle-menu span:after, .toggle-menu span:before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
}

.toggle-menu span, .toggle-menu span:after, .toggle-menu span:before {
    width: 100%;
    height: 2px;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    background-color: #f39f18;
}

.toggle-menu span:after {
    top: 18px;
}

.toggle-menu.on span {
    background-color: transparent;
}

.toggle-menu.on span:before {
    -webkit-transform: rotate(45deg) translate(-1px,0);
    -ms-transform: rotate(45deg) translate(-1px,0);
    transform: rotate(45deg) translate(-1px,0);
}

.toggle-menu.on span:after {
    -webkit-transform: rotate(-45deg) translate(6px,-7px);
    -ms-transform: rotate(-45deg) translate(6px,-7px);
    transform: rotate(-45deg) translate(6px,-7px);
}

.hidden-menu {
    display: none;
    position: relative;
    top: 20px;
    text-align: center;
    font-size: 16px;
}

JavaScript

$(".toggle-menu").click(function() {
		$(this).toggleClass("on");
		$(this).parent().find(".hidden-menu").slideToggle();
		return false;
	});
  
  $(".hidden-menu ul li a").click(function() {
		$(".toggle-menu").removeClass("on");
		$(".hidden-menu").hide();
		return false;
	});