JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    
    <div class="full-menu">
      <div class="full-menu--middle">
        <button class="menu-toggle menu-toggle--close"></button>    
        <div class="section group menu_items">
            <ul>
                <li>Option</li>
                <li>Option</li>
                <li>Option</li>
                <li>Option</li>
                <li>Option</li>
                <li>Option</li>
                <li>Option</li>
                <li>Option</li>
                <li>Option</li>
                <li>Option</li>
                <li>Option</li>
                <li>Option</li>
                <li>Option</li>
                <li>Option</li>
                <li>Option</li>
                <li>Option</li>
                <li>Option</li>
 <li>Option</li>
                <li>Option</li>
                <li>Option</li>
                <li>Option</li>
                <li>Option</li>
                <li>Option</li>
                <li>Option</li>
                <li>Option</li>
                <li>Option</li>
                <li>Option</li>
                <li>Option</li>
                <li>Option</li>
                <li>Option</li>
                <li>Option</li>
                <li>Option</li>
                <li>Option</li>
                <li>Option</li>
                <li>Option</li>
                <li>Option</li>
                <li>Option</li>
                <li>Option</li>
                <li>Option</li>
                <li>Option</li>
                <li>Option</li>
            </ul>
        </div>
      </div>
    </div>


    <div class="content">
        <button class="menu-toggle"></button>
    </div>
    
    
            <div class="page_container">        
                <div class="page_inner">
                    <h1>
                      Title
                    </h1>
                </div>
            </div>
            
            <div class="page_container">        
                <div class="page_inner">
                   ...

CSS

html,
body {
    height: 100%;
    width: 100%;
}


.main_menu {
    display: none;
    color: #ffffff;
}

.full-menu {
    visibility: hidden;
    display: table;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    background-color: rgba(38, 38, 38, 0.8);
    padding-left: 25px;
    padding-right: 20px;
    z-index: 100;
}

.full-menu--open {
    visibility: visible;
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

.full-menu--transition {
    -webkit-transition: all 100ms ease-in-out;
    transition: all 100ms ease-in-out;
}

.full-menu--middle {
    display: table-cell;
    vertical-align: middle;
}

.menu-toggle {
    background-color: transparent;
    border: 0;
    color: #fff;
    position: fixed;
    left: 20px;
    top: 20px;
    z-index: 100000;
    font-size: 1.4em;
}

.menu-toggle:before {
    content: '\f0c9';
    font-family: 'FontAwesome';
    margin: 0 20px 0 0;
}

.menu-toggle--close {
    position: fixed;
    top: 20px;
    left: 20px;
}

.menu-toggle_black {
    background-color: transparent;
    border: 0;
    color: #000;
    position: fixed;
    left: 20px;
    top: 20px;
    z-index: 100000;
    font-size: 1.4em;
}

.menu-toggle_black:before {
    content: '\f0c9';
    font-family: 'FontAwesome';
    margin: 0 20px 0 0;
}

.menu_items{
    overflow: scroll;
    height: 100%;
    padding-top: 100px;
    padding-bottom: 100px;
    font-family: 'montserratlight', sans-serif;
    text-transform: uppercase;
}

.menu_items a:hover{
    color: #bababa;
    transition-delay: ease;
}

.menu_items li{
    padding-bottom: 15px;
    overflow-x: hidden;
}

.menu_nav{
    font-family: 'montserratsemibold', sans-serif;
    padding-right: 40px;
    overflow-x: hidden;
}

.page_inner_ {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.page_container {
	display: table;
	height: 100%;
	width: 100%;
	position: relative;
	color:...

JavaScript

$('.menu-item').on('click', function(){
          $('.full-menu').toggleClass('full-menu--open');
        })
  
        $('.menu-toggle').on('click', function(){
          $('.full-menu').toggleClass('full-menu--open');
        })

    $(function() {
        $('a[href*=#]:not([href=#])').click(function() {
            $('.full-menu').toggleClass('full-menu--open');
            if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) {

                var target = $(this.hash);
                target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
                if (target.length) {
                    $('html,body').animate({
                        scrollTop: target.offset().top
                    }, 1000);
                    return false;
                }
            }
        });
    });