JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu"><div id="menu"><a href="#page1" class="active">Home</a> | <a href="#page2">Page 2</a> | <a href="#page3">Page 3</a> | <a href="#page4">Page 4</a> | <a href="#page5">Page 5</a></div>
</div>
<div id="page1" class="page">
    page1
</div>
<div id="page2" class="page">
    page2
</div>
<div id="page3" class="page">
    page3
</div>
<div id="page4" class="page">
    page4
</div>
<div id="page5" class="page">
    page5
</div>

CSS

html{height:calc(100% - 100px) !important;width:100% !important; margin:0px; padding:0px;}

body{height:500% !important;width:100% !important; margin:0px; padding:0px;}

.page {height:20% !important; width:100% !important;}

#page1{background-color:red; margin-top: 100px;}

#page3{background-color:green;}

#page5{background-color:blue;}

#menu{width: 100%; height: 100px; color: #fff; background-color: black; position: fixed; top:0px}

#menu a {color: white; text-decoration:none;}

#menu a.active {color: red; text-decoration:underline;}