JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://demos.flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js"></script>
<ul id="nav">
    <li><a href="#first">First</a></li> 
    <li><a href="#second">Second</a></li> 
    <li><a href="#third">Third</a></li>     
</ul>

<div id="first">First</div>
<div id="second">Second</div>
<div id="third">Third</div>

CSS

ul {
    position: fixed;
    z-index: 2;
    top: 20px;
    right: 20px;
    background: white;
}
body {
    height: 2000px;
    width: 2000px;
}

div {
    position: absolute;
    z-index: 1;
    width: 100px;
    height: 100px;  
    
    color: #fff;
    padding: 5px;
    font: 1em georgia;
    font-variant: small-caps;
}

#first {
    top: 10px;
    left: 10px;
    background: blue;
}

#second {
    top: 1000px;
    left: 800px;
    background: green;
}

#third {
    top: 500px;
    left: 500px;
    background: red;
}

JavaScript

$('a').click(function(e) {
    // Stop default link click from occuring 
    e.preventDefault();

    // Scroll to the position using the jQuery scrollTo plugin
    // Element id is taken from link's href attribute
    $(window).scrollTo($(this).attr('href'), {duration: 500});
});