JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://rawgithub.com/alvarotrigo/fullPage.js/master/jquery.fullPage.css">
<script src="https://rawgithub.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>
<ul id="menu">
    <li data-menuanchor="firstPage" class="active"><a href="#firstPage">section a</a>

    </li>
    <li data-menuanchor="secondPage"><a href="#secondPage">section b</a>

    </li>
    <li data-menuanchor="3rdPage"><a href="#3rdPage">section c</a>

    </li>
    <li data-menuanchor="4thpage"><a href="#4thpage">section d</a>

    </li>
</ul>
<div class="section" id="a">
     <h1> Section a </h1>

</div>
<div class="section" id="b">
     <h1> Section b </h1>

</div>
<div class="section" id="c">
     <h1> Section c </h1>

</div>
<div class="section" id="d">
     <h1> Section d </h1>

</div>

CSS

#menu li {
    display:inline-block;
    margin: 10px;
    color: #000;
    background:#fff;
    background: rgba(255, 255, 255, 0.5);
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
#menu li.active {
    background:#666;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
}
#menu li a {
    text-decoration:none;
    color: #000;
}
#menu li.active a:hover {
    color: #000;
}
#menu li:hover {
    background: rgba(255, 255, 255, 0.8);
}
#menu li a, #menu li.active a {
    padding: 9px 18px;
    display:block;
}
#menu li.active a {
    color: #fff;
}
#menu {
    position:fixed;
    top:0;
    left:0;
    height: 40px;
    z-index: 70;
    width: 100%;
    padding: 0;
    margin:0;
}
body {
    color: #fff;
}
h1 {
    font-size:3em;
    margin:0;
}
.section {
    text-align: center;
}

JavaScript

// Script FullPage
  $.fn.fullpage({
      slidesColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
      anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage'],
      menu: '#menu',
      afterRender: function () {
          $('#menu').hide();
      },
      afterLoad: function (anchor, index) {
          if (index == 1) {
              $('#menu').fadeOut(0);
          } else {
              $('#menu').fadeIn(0);
          }
      },
      onLeave: function(index, direction){
          if (index == 2 && direction == 'up') {
               $('#menu').hide()   ;
          }
      }
  });

  $('a[href="#firstPage"]').click(function () {
      $('#menu').hide();
  });