JSFiddle - React, Tailwind, and code Playground

HTML

<button class="icon-mobile-menu ">
   <span></span>
    <span></span>
    <span></span>
</button>
<div class="menu">
    <div id="menu-center">
        <ul>
            <li><a class="menu-active" href="#home">Home</a>

            </li>
            <li><a href="#portfolio">Portfolio</a>

            </li>
            <li><a href="#about">About</a>

            </li>
            <li><a href="#contact">Contact</a>

            </li>
        </ul>
    </div>
</div>
<section class="section" id="home"></section>
<section class="section" id="portfolio"></section>
<section class="section" id="about"></section>
<section class="section" id="contact"></section>

CSS

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}
.menu {
  
  
    width: 100%;
    height: 75px;
    background-color: rgba(0, 0, 0, 1);
    position: fixed;
    background-color:rgba(4, 180, 49, 0.6);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.menu.menu-fsdgsd {
  
     opacity:1;
    width: 100%;
    height: 75px;
    background-color: rgba(0, 0, 0, 1);
    position: fixed;
    background-color:rgba(4, 180, 49, 0.6);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

#menu-center {
    width: 980px;
    height: 75px;
    margin: 0 auto;
}
#menu-center ul {
    margin: 15px 0 0 0;
}
#menu-center ul li {
    list-style: none;
    margin: 0 30px 0 0;
    display: inline;
}
.menu-active {
    font-family:'Droid Sans', serif;
    font-size: 14px;
    color: #fff;
    text-decoration: none;
    line-height: 50px;
}
a {
    font-family:'Droid Sans', serif;
    font-size: 14px;
    color: black;
    text-decoration: none;
    line-height: 50px;
}
#home {
    background-color: grey;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-image: url(images/home-bg2.png);
}
#portfolio {
    background-image: url(images/portfolio-bg.png);
    height: 100%;
    width: 100%;
}
#about {
    background-color: blue;
    height: 100%;
    width: 100%;
}
#contact {
    background-color: red;
    height: 100%;
    width: 100%;
}

.icon-mobile-menu {
 display:none;
   width: 40px;
  height: 35px;
  border: none;
  background: rgba(44,44,68,0.0);
   position:relative;
  cursor: pointer;
  margin:15px;
  right:0px;
  border-radius:4px;
  /*border: 1px solid #000;*/
  float: right;
}

.icon-mobile-menu:focus {
  outline: none;
}
.icon-mobile-menu span {
  width: 30px;
  height: 2px;
  left: -2px;
  border-radius: 100px;
  background: #fff;
 ...

JavaScript

/*--------- Переменные */
let icon_mobile = document.querySelector(".icon-mobile-menu");
let menu_mobile = document.querySelector(".menu");
let menus_mobile = document.querySelectorAll(".menu li a");

/*--------- Изменения иконки по клику */
function iconClick(){
 
 icon_mobile.classList.toggle("on");
  menu_mobile.classList.toggle("menu-fsdgsd");
}

/*--------- Изменения иконки и меню  по клику по пунктам меню*/
function menuClick(ed){
   
   if( menu_mobile.contains(ed.target) ){    
      icon_mobile.classList.toggle("on");
      menu_mobile.classList.remove("menu-fsdgsd"); 
   }   
}//end function menuClick(ed)

for (let i = 0; i < menus_mobile.length; i++) {
     menus_mobile[i].addEventListener('click', menuClick);  
}
/* Конец Изменения иконки и меню  по клику по пунктам меню */
icon_mobile.addEventListener("click", iconClick);

let timerId = null;
window.addEventListener('resize', function(){
   clearTimeout(timerId);
   timerId = setTimeout(function() {
       
      let vw = window.innerWidth;
      if( vw < 768 )
      {
         menu_mobile.classList.add("show");
      }
      else
         menu_mobile.classList.remove("show");      
   }, 20);
}, true);
//menu_mobile.addEventListener("click", menuClick);
   
if( window.innerWidth < 768 )
{
   menu_mobile.classList.add("show");
}