JSFiddle - React, Tailwind, and code Playground

by Robert Rees

HTML

<div id="div1">
    <h3>Div 1</h3>
    <a href="#div2">Next</a>
</div>
<div id="div2">
    <h3>Div 2</h3>
    <a href="#div3">Next</a>
    <a href="#div1">Prev</a>
</div>
<div id="div3">
    <div class="content">
        <h3>Div 3</h3>
        <a href="#div4">Next</a>
        <a href="#div2">Prev</a>
    </div>
</div>
<div id="div4">
    <h3>Div 4</h3>
    <a href="#div5">Next</a>
    <a href="#div3">Prev</a>
</div>
<div id="div5">
    <h3>Div 5</h3>
    <a href="#div4">Prev</a>
</div>

CSS

body {
    overflow:hidden;
}

div {
    background:red;
}

h3 {
    color:#fff;
}

a {
    color:yellow;
    display:inline-block;
    margin-top:320px;
    margin-right:10px;
}

#div3 {
	overflow-y: scroll;
}

#div3 .content {
	height: 450px;
}

#div3 a {
    margin-top: 500px;
}