JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">
    <ul class="nav-main">
        <li><a href="#about">About</a>
    </ul>
</div>
<div id="container">
    <div class="space-holder"></div>
    <div id="about"><p>ABOUT</p></div>
    <div class="space-holder"></div>
</div>

CSS

body{
    margin: 0;
    padding: 0;
}
#header{
    background: #ccc;
    position: fixed;
    width: 100%;
}
.space-holder{
    height: 2000px;
}

JavaScript

$('.nav-main a').click(function(e) {
    e.preventDefault();
    scrollToID($(this).attr('href'));
});

function scrollToID(ID){
    $('html, body').animate({
        'scrollTop': $(ID).offset().top - $('#header').height()
    }, 'slow', function(){
        var currentPosition = $(window).scrollTop();
        window.location.hash = ' '+ ID;
        //$(window).scrollTop(currentPosition);
    });
}