JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
</head>
<body>
<header role="banner">
<nav>
<a href="#1">Section one</a>
<a href="#2">Section two</a>
<a href="#3">Section three</a>
</nav>
</header>

<div role="main">

<section id="1" class="height">
    <header>
        <h1>section one title</h1>
    </header>
</section>

<section id="2" class="height">
    <header>
    <h1>section two title</h1>
    </header>
<button>Navigate Articles</button>

<article class="height">
<h1>title</h1>
<p>paragraph</p>
</article>

<article class="height">
<h1>title</h1>
<p>paragraph</p>
</article>

</section>

<section id="3" class="height">
    <header>
    <h1>section three title</h1>
    </header>
</section>

</div>

</body>
</html>

CSS

html, body, [role="main"] { 
    height:100%;
    overflow:hidden;
}
body {
    position: relative; /*so .height is relative to body when absolutely positioned*/
}

[role="banner"] {
    background: yellow;
    position:fixed;
    top:0;
    left:0;
    z-index: 999;
}

.height {
    background: red;
    height:100%;
    width:100%;
    position: absolute;
}
h1 {
    margin-top: 30px; /* to prevent menu overlap. */
}

JavaScript

//Hide all .height sections at first.
$('section.height').hide();

//Show them, when their respective link is clicked.
$('nav a').click(function() {
    var $this = $(this);
    section = $this.attr('href');
    
    $(section).siblings('.height').hide();
    $(section).show();    
});