JSFiddle - React, Tailwind, and code Playground

HTML

<div id='header'> 

text here...

</div>
    <div id='link'>
        <a href='#test1'>test 1</a>
        <a href='#test2'>test 2</a>
        <a href='#test3'>test 3</a>  
    </div>


<span class="anchor" id="test1"></span>
<div class="section">Text</div>

<span class="anchor" id="test2"></span>
<div class="section">Text</div>

<span class="anchor" id="test3"></span>
<div class="section">Text</div>

CSS

#header{
    position: fixed;
    right: 0;
    left: 0; 
    top:0;
    z-index: 1030;
    margin-bottom: 0; 
    height:200px;
    background-color:red;
}

#link{
    margin-top:200px;
}
.anchor{
  display: block;
  height: 200px; <!--same height as header-->
  margin-top: -200px; <!--same height as header-->
  visibility: hidden;
}

.section {
    height: 300px;
    background: #999;
}