JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="nav">
    <li><a href="#section2">Go to Section 2</a></li>
    <li><a href="#section3">Go to Section 3</a></li>
    <li><a href="#section4">Go to Section 4</a></li>
    <li><a href="#section5">Go to Section 5</a></li>
    <li><a href="#section6">Go to Section 6</a></li>
    <li><a href="#section7">Go to Section 7</a></li>
</ul>
    
<div id="wrapper">
    <div id="section1" class="section">
        Section 1 - default section when a link isn't hovered.
    </div>
    <div id="section2" class="section">
        Section 2
    </div>
    <div id="section3" class="section">
        Section 3
    </div>
    <div id="section4" class="section">
        Section 4
    </div>
    <div id="section5" class="section">
        Section 5
    </div>
    <div id="section6" class="section">
        Section 6
    </div>
    <div id="section7" class="section">
        Section 7
    </div>
</div>

CSS

#nav{
    margin: 10px;
    padding: 0; 
    clear: both;
}

#nav li{
    list-style-type: none;
}

#nav li a:hover{
    background: blue;
    color: #fff;
}

#wrapper{
    width: 400px;
    height: 200px;
    overflow: scroll;
    border: 1px solid black;
}

.section{
    width: 400px;
    height: 200px;
    color: white;
}

#section1{ background: blue; }
#section2{ background: red; }
#section3{ background: green }
#section4{ background: orange }
#section5{ background: yellow }
#section6{ background: black; }
#section7{ background: gold; }