JSFiddle - React, Tailwind, and code Playground

HTML

<header>
    <ul>
        <li>
            <a href="#a">CONTENT A</a>
        </li>
        <li>
            <a href="#b">CONTENT B</a>
        </li>
        <li>
            <a href="#c">CONTENT C</a>
        </li>
        <li>
            <a href="#d">CONTENT D</a>
        </li>
        <li>
            <a href="#e">CONTENT E</a>
        </li>
    </ul>
</header>

<section id="a">
    <h3>I'm A !</h3>
    <p>ABCD EFGHIJK LMNOPQR STUVWXYZ</p>
</section>

<section id="b">
    <h3>I'm B !</h3>
    <p>ABCD EFGHIJK LMNOPQR STUVWXYZ</p>
</section>

<section id="c">
    <h3>I'm C !</h3>
    <p>ABCD EFGHIJK LMNOPQR STUVWXYZ</p>
</section>

<section id="d">
    <h3>I'm D !</h3>
    <p>ABCD EFGHIJK LMNOPQR STUVWXYZ</p>
</section>

<section id="e">
    <h3>I'm E !</h3>
    <p>ABCD EFGHIJK LMNOPQR STUVWXYZ</p>
</section>

<footer>
    I'm a footer, I live in the bottom of this document!
</footer>

CSS

a, a:visited {
				color:inherit;
				text-decoration:none;
			}
		
			ul {
				height:100px;
				line-height:100px;
				display:table;
				margin:0 auto;
				list-style:none;
				margin-bottom:100px;
			}
			
			li {
				width:100px;
				padding:0 20px;
				margin:0 10px;
				border-bottom:2px solid #333;
				cursor:pointer;
				float:left;				
			}
			
			li:hover {
				background-color:#eaeaea;
			}
		
			#a, #b, #c, #d, #e {
				height:300px;				
			}
			
			h3 {
				font-size:18pt;
				padding-bottom:10px;
				border-bottom:2px solid black;
				margin-bottom:20px;
			}
			
			footer {
				background-color:#333;
				color:white;
				text-align:center;
				line-height:100px;
				margin-top:600px;
			}

JavaScript

$(document).ready(function() {
    $('li').click(function(e) {
        var hh = $('header').height();
        
        var id = $(this).find('a').attr('href');
        var target = $(id);
        
        // try to comment preventDefault() code.
        // And then there will be no spaces for the header
        // when you click exactly the A elements.
        e.preventDefault();
        
        $(window).scrollTop(target.offset().top - hh);
    });
});