JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <ul>
        <li><a href="#first">first</a></li>
        <li><a href="#second">second</a></li>
        <li><a href="#third">third</a></li>
    </ul>
    <div id="someconteiner">
        <div id="first">
            test test 
        </div>
        <div id="second">
            test test 
        </div>
        <div id="third">
            test test 
        </div>
    </div>
</div>

CSS

ul {
    background: red;
    height: 50px;
    position: fixed;
    width: 100%;
    top: 0
    z-index:999;
}
ul li {
    display: inline;
}
#first {
    background: #fc0;
    height: 150px;
    z-index:15;
}
#second {
    background: #f0c;
    height: 150px;
     z-index:14;
}
#third {
    background: #c0f;
    height: 150px;
        z-index:13;
}
#container ul{
    z-index:999;
    display:block;
}
#someconteiner div{
    padding-top:50px;
    margin-bottom:-50px;
    position:relative;
    display:block;
}