JSFiddle - React, Tailwind, and code Playground

HTML

<body>
        <header>
            Header
            <ul>
                <li><a class="local" href="#content1">Content one</a></li>
                <li><a class="local" href="#content2">Content two</a></li>
                <li><a class="local" href="#content3">Content three</a></li>
            </ul>
        </header>
        
        <div id="content1">
            Content one
        </div>
        <div id="content2">
            Content two
        </div>
        <div id="content3">
            Content three
        </div>
        <footer>
            Footer
        </footer>
    </body>

CSS

body {
                margin: 0;
            }
            header {
                position:relative;
                background-color: #FFA1A1;
                height: 80px;
                position: fixed;
                width: 100%;
                top: 5px;
            }
#content1 {
    margin-top:90px;
}
            #content1 {
                background-color: #79a86f;
                height: 400px;
            }
            #content2 {
                background-color: #8c73ba;
                height: 400px;
            }
            #content3 {
                background-color: #2bc4bf;
                height: 400px;
            }
            footer {
                background-color: #eded9c;
                height: 100px;
            }
            li {
                display: inline;
            }

JavaScript

$('a.local').click(function(){
    var x=$(this).attr('href');
    var dim=$(x).position();
    console.log(dim);
    $('html, body').animate({'scrollTop':dim.top-90},400);
    return false;
})