JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>
<link rel="stylesheet" href="https://rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.css">
<ul id="myMenu">
    <li data-menuanchor="firstPage" class="active"><a href="#firstPage">First section</a></li>
    <li data-menuanchor="secondPage"><a href="#secondPage">Second section</a></li>
    <li data-menuanchor="thirdPage"><a href="#thirdPage">Third section</a></li>
    <li data-menuanchor="fourthPage"><a href="#fourthPage">Fourth section</a></li>
    <li data-menuanchor="fifthPage"><a href="#fifthPage">Fifth section</a></li>
    <li data-menuanchor="sixPage"><a href="#sixPage" class="trigger">Six section</a></li>
</ul>

<div id="fullpage">
    <div class="section">Some section 1</div>
    <div class="section">Some section 2</div>
    <div class="section">Some section 3</div>
    <div class="section">Some section 4</div> 
    <div class="section">Some section 5</div> 
    <div class="section">Some section 6</div> 
</div>

CSS

#myMenu {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 78;
}

ul {
    margin: 0;
    padding: 0;
}

ul li {
    list-style: none;
    display: inline-block;
}

ul li a {
    color: grey;
}

ul li.active a {
    color: red;
}

JavaScript

$('#fullpage').fullpage({
    sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
    anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'fifthPage', 'sixPage'],
	menu: '#myMenu',
    //Scrolling
    css3:true,  
    loopBottom: false,
    loopTop: false,
    scrollingSpeed: 1200,
   });