JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <!-- MENU -->
    <div class="cnt__nav">
        <nav>
            <ul>
                <li><a href="#head" class="active">Home</a></li>
                <li><a href="#main">About</a></li>
                <li><a href="#foot">Portfolio</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </div>
	
    <!-- NAV TRIGGER -->
    <div id="cnt__nav-trigger">
        <div class="nav-trigger">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>

CSS

/* Mobile */
.cnt__nav {
	background: rgba(93, 26, 7, 0.9);
	display: block;
	height: 86px;
	overflow: hidden;
	position: fixed;
	text-align: center;
	top: 0;
	width: 100%;
	z-index: 10;
	/* Transition */
	transition-property: all;
	transition-duration: 0.4s;
	transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
	transition-delay: 0;
	/* Safari */
	-webkit-transition-property: all;
	-webkit-transition-duration: 0.4s;
	-webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
	-webkit-transition-delay: 0;
}

.cnt__nav.is-open {
	height: 100vh;
	/* Transition */
	transition-property: all;
	transition-duration: 1s;
	transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
	transition-delay: 0;
	/* Safari */
	-webkit-transition-property: all;
	-webkit-transition-duration: 1s;
	-webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
	-webkit-transition-delay: 0;
}

.cnt__nav a {
	color: #fff;
	font-family: 'Oswald', sans-serif;
	font-size: 25px;
	padding: 15px;
	position: relative;
	text-decoration: none !important;
	text-transform: uppercase;
	/* Transition */
	transition-property: all;
	transition-duration: 0.4s;
	transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
	transition-delay: 0;
	/* Safari */
	-webkit-transition-property: all;
	-webkit-transition-duration: 0.4s;
	-webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
	-webkit-transition-delay: 0;
}

.cnt__nav li a.active {
	border-bottom: 2px solid #dcc5a4;
	color: #dcc5a4;
}

.cnt__nav a:hover {
	color: #fff;
}

.cnt__nav ul {
	/* Transform */
	-moz-transform: translateY(20vh);
	-ms-transform: translateY(20vh);
	-o-transform: translateY(20vh);
	transform: translateY(20vh);
	-webkit-transform: translateY(20vh);
}

.cnt__nav li {
	margin: 40px 0;
}

.nav-trigger-line {
	background: #fff;
	display: block;
	height: 2px;
	left: 10px;
	position: absolute;
	width: 22px;
}

#cnt__nav-trigger {
	border: 2px solid #fff;
	border-radius:...

JavaScript

$(document).ready(function() {
        $('#cnt__nav-trigger, .cnt__nav, .cnt__nav a').click(function() {
            $('.nav-trigger').toggleClass('is-open');
            $('.cnt__nav').toggleClass('is-open');
            $('.cnt__nav a').toggleClass('is-open');
        });
    });
			
			
			
			
    $(document).ready(function () {
        $(document).on("scroll", onScroll);
   
        //smoothscroll
        $('a[href^="#"]').on('click', function (e) {
            e.preventDefault();
            $(document).off("scroll");
        
            $('a').each(function () {
                $(this).removeClass('active');
            })
            $(this).addClass('active');
      
            var target = this.hash,
            menu = target;
            $target = $(target);
            $('html, body').stop().animate({
                'scrollTop': $target.offset().top+2
            }, 500, 'swing', function () {
                window.location.hash = target;
                $(document).on("scroll", onScroll);
            });
        });
    });

    function onScroll(event){
        var scrollPos = $(document).scrollTop();
        $('.cnt__nav a').each(function () {
            var currLink = $(this);
            var refElement = $(currLink.attr("href"));
            if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
                $('.cnt__nav ul li a').removeClass("active");
                currLink.addClass("active");
            }
            else {
                currLink.removeClass("active");
            }
        });
    }