JSFiddle - React, Tailwind, and code Playground

HTML

<nav id="nav">
        <ul>
            <li>
                <a class="navLink" href="#home">HOME</a>
            </li>
            <li>
                <a class="navLink" href="#info">INFO</a>
            </li>
            <li>
                <a class="navLink" href="#pics">PICS</a>
            </li>
        </ul>   
    </nav>

    <section id="home">
        <!-- stuff -->
    </section>

    <section id="info">
        <!-- stuff -->
    </section>

    <section id="pics">
        <!-- stuff -->
    </section>

CSS

#home { border: 1px solid red; width: 300px; height: 300px; }
#info { border: 1px solid blue; width: 300px; height: 300px; }
#pics { border: 1px solid green; width: 300px; height: 300px; }

JavaScript

$('a.navLink').on('click', function(event) {
    event.preventDefault();
    var href = this.href;
    var target = $(href.substring(href.lastIndexOf('#')));
    alert(target);
    if( target.length ) {
        $('html, body').animate({
            scrollTop: $(target).offset().top
        }, 1000);
    }
});