JSFiddle - React, Tailwind, and code Playground

by Jérôme Beau

HTML

<html>
    
    <body>
        <div id="viewport">
            <div id="scrollpane">
                <div class="page" id="page1">
                    <header>
                        <nav> <a href="#page2">Next</a>

                        </nav>
                    </header>Page 1</div>
                <div class="page" id="page2">
                    <header>
                        <nav> <a href="#page1">Prev</a>
 <a href="#page3">Next</a>

                        </nav>
                    </header>Page 2</div>
                <div class="page" id="page3">
                    <header>
                        <nav> <a href="#page2">Prev</a>

                        </nav>
                    </header>Page 3</div>
            </div>
        </div>
    </body>

</html>

CSS

#viewport {
    width: 9em;
    height: 3em;
    overflow: hidden;
    border: 1px solid red;
}
#scrollpane {
    width: 300%;
}
.page {
    width:8em;
    display:inline-block;
}
#page1 {
    background-color:cyan;
}
#page2 {
    background-color:green;
}
#page3 {
    background-color:yellow;
}