JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://individual11.github.io/Scroll-To/public/js/scrollTo.min.js"></script>
<div id="content">
    <div id="pages">
        <div id="page1" class="page">
            <div class="header"></div>
            <div class="inner-content"></div>
            <div class="inner-content"></div>
        </div>
        <div id="page2" class="page">
            <div class="header"></div>
            <div class="inner-content"></div>
        </div>
        <div id="page3" class="page">
            <div class="header"></div>
            <div class="inner-content"></div>
            <div class="inner-content"></div>
        </div>
        <div id="page4" class="page">
            <div class="header"></div>
            <div class="inner-content"></div>
        </div>
    </div>
</div>
<nav>
    <ul>
        <li><a href="#page1" id="defaultLink">Page1</a></li>
        <li><a href="#page2" id="defaultLink">Page2</a></li>
        <li><a href="#page3" id="defaultLink">Page3</a></li>
        <li><a href="#page4" id="defaultLink">Page4</a></li>
    </ul>
</nav>

CSS

#content {
    width:400px;
    height: 370px;
    overflow: hidden;
    border-width: 2px;
    border-color: blue;
    border-style: solid;
}

#pages {
    width: 1604px;
    height: 370px;
}

.page {
    width:401px;
    height:370px;
    float: left;
}

#page1 { background: pink; }
#page2 { background: brown; }
#page3 { background: green; }
#page4 { background: red; }

.header {
    width: 300px;
    height: 185px;
    border: lightgreen 2px solid;
}

.inner-content {
    width: 150px;
    height: 150px;
    border: lightblue 2px solid;
    float: left;
}

nav ul li { display: inline-table; margin-left: 15px; margin-top: -10px; }