JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nav">
    <ul>
        <li><a href="#link1" class="link active">Link 1</a>

        </li>
        <li><a href="#link2" class="link">Link 2</a>

        </li>
        <li><a href="#link3" class="link">Link 3</a>

        </li>
        <li><a href="#link4" class="link">Link 4</a>

            <li><a href="#link5" class="link">Link 5</a>

            </li>
        </li>
    </ul>
</div>
<div id="link1"></div>
<div id="link2"></div>
<div id="link3"></div>
<div id="link4"></div>
<div id="link5"></div>

CSS

html, body {
    height: 100%;
}
#link1, #link2, #link3, #link4, #link5 {
    min-height: 100%;
}
#link1 {
    background-color: blue;
}
#link2 {
    background-color: red;
}
#link3 {
    background-color: green;
}
#link4 {
    background-color: orange;
}
#link5 {
    background-color: pink;
}
#nav {
    background-color: #999999;
    position: fixed;
}
#nav li {
    list-style-type: none;
}
#nav a:link {
    color: #ffffff;
}
#nav a.active {
    background-color: #333333;
    color: #ffffff;
}

JavaScript

$(document).ready(function () {
    $('a').click(function (e) {
        e.preventDefault();
        var href = $(this).attr('href');
        $("html:not(:animated),body:not(:animated)").animate({
            'scrollTop': $(href).offset().top
        }, 700, 'swing');
    });
    $(window).scroll(function () {
        var href = $(this).scrollTop();
        $('.link').each(function (event) {
            if (href >= $($(this).attr('href')).offset().top - 1) {
                $('.link').not(this).removeClass('active');
                $(this).addClass('active');
            }
        });
    });
    $('#nav a').click(function () {
        $('#nav a').css({
            backgroundColor: ""
        });
        $(this).css("background-color", "#333333");
    });
});