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>

<div id='div1'>
    <a id='test1'>test1 content</a>
    
    
</div>
<div id='div2'>
     <a id='test2'>test2 content</a>
</div>
<div id='div3'> 
    <a id='test3'>test3 content</a>
</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;
}
#div1{    
    height:300px;
    background-color:yellow;
}
#div2{
    height:300px;
    background-color:blue;
}
#div3{
    height:300px;
    background-color:black;
}