JSFiddle - React, Tailwind, and code Playground

HTML

<div class="fixed-navbar">
  <p>Fixed navbar</p>
  <a href="#TITLE1">Link1</a> <a href="#TITLE2">Link2</a> <a href="#TITLE3">Link3</a> <a href="#TITLE4">Link4</a>
</div>


<h1 id="TITLE1">Title 1</h1>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>

<h1 id="TITLE2">Title 2</h1>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>

<h1 id="TITLE3">Title 3</h1>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>

<h1 id="TITLE4">Title 4</h1>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>

CSS

* {
  margin: 0;
  padding: 0;
}

body {
  height: 2000px;
  padding-top:40px;
}

.fixed-navbar {
  background: silver;
  height: 40px;
  position: fixed;
  width: 100%;
  top:0;
}


h1:before { 
  display: block; 
  content: " "; 
  margin-top: -40px; 
  height: 40px; 
  visibility: hidden; 
  pointer-events: none;
}