JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<nav class="nav-bar">
	<ul>
    	<li class="active" id="menu_index">Welcome</li
        ><li id="menu_page1">Menu1</li
	    ><li id="menu_page2">Menu2</li
        ><li id="menu_page3">Menu3</li
        ><li id="menu_page4">Menu4</li>
    </ul>
</nav>
	<div id="index"></div>
    <div id="page1"></div>
    <div id="page2"></div>
    <div id="page3"></div>
    <div id="page4"></div>
</body>

CSS

@charset "utf-8";
/* CSS Document */

body {
	margin:0;
	font-family: 'Gotham SSm A','Gotham SSm B',sans-serif;
}
/*-------------------- NAV -----------------------*/
.active {
	color: rgb(200, 247, 197);
	background-color: rgba(228, 241, 254, 0.3);
	-webkit-transition:  color 0.2s linear, background-color 0.2s linear;
    -moz-transition: color 0.2s linear, background-color 0.2s linear;
    -ms-transition: color 0.2s linear, background-color 0.2s linear;
    -o-transition: color 0.2s linear, background-color 0.2s linear;
    transition: color 0.2s linear, background-color 0.2s linear;
}


.nav-bar {
	  position: fixed;
	  z-index: 9999;
	  width: 100%;
	  height: 8vh;
	  background-color: rgba(34, 49, 63, 0.5);
}

nav ul {
	margin:0 11vh 0 0;
	list-style:none;
	text-transform:uppercase;
	padding:0;
	float:right;
	height:8vh;
}

nav ul li{
	display:inline-block;
	color: rgb(255,255,255);
	font-size:0.8em;
	letter-spacing: 0.16em;
	font-weight:500;
	padding:0px 0.5vw 0px 0.5vw;
	text-align:center;
	height: 8vh;
	line-height:8vh;
	width:10vh;
	-webkit-transition:  color 0.2s linear, background-color 0.2s linear;
    -moz-transition: color 0.2s linear, background-color 0.2s linear;
    -ms-transition: color 0.2s linear, background-color 0.2s linear;
    -o-transition: color 0.2s linear, background-color 0.2s linear;
    transition: color 0.2s linear, background-color 0.2s linear;
}

nav ul li:hover{
	cursor:pointer;
	color: rgb(200, 247, 197);
	background-color: rgba(228, 241, 254, 0.3);
}

nav ul li a{
	text-decoration:none;
	color:rgb(255,255,255);
}

nav ul li:hover a{
	color: rgb(200, 247, 197);
}


/*-------------------- END OF NAV ---------------*/
/*-------------------- PAGES ----------------------*/

#index{
	background-color:rgb(27, 163, 156);
	height: 102vh;
}

#page1{
	background-color:rgb(134, 226, 213);
	height: 102vh;
}

#page2{
	background-color:rgb(101, 198, 187);
	height: 104vh;
}

#page3{
	background-color:rgb(162, 222, 208);
	height:...

JavaScript

$(document).ready(function(){

	$("nav ul li").click(function(){
		var sectionClass = $(this).attr('class');	
			if($(this).hasClass('active')){
			}
			else {
				$("nav ul li.active").removeClass('active');	
				$(this).addClass('active'); 								
				sectionId = $(this).attr('id');
				var parts = sectionId.split("_");
				$('html, body').animate({										
				scrollTop: $("#"+parts[1]).offset().top},'slow');
			}
			  
			});
	
	
});