JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    <a href="#page-1" class="scrollitem selected">page 1</a>
    <a href="#page-2" class="scrollitem">page 2</a>
    <a href="#page-3" class="scrollitem">page 3</a>
</nav>
<div class="wrapper">

    <div id="page-1" class="page">
        <div class="page-container">
            <h3>page 1</h3>
            <div>Simulated content heigher than 100%</div>
        </div>
    </div>
    <div id="page-2" class="page">
        <div class="page-container">
            <h3>page 2</h3>
            <div>Simulated content heigher than 100%</div>
            <div>Simulated content heigher than 100%</div>
            <div>Simulated content heigher than 100%</div>
            <div>Simulated content heigher than 100%</div>
            <div>Simulated content heigher than 100%</div>
        </div>
    </div>
    <div id="page-3" class="page">
        <div class="page-container">
            <h3>page 3</h3>
            <div>Simulated content heigher than 100%</div>
        </div>
    </div>
</div>

CSS

html, body {
            height: 100%;
            margin: 0;
            overflow-x:hidden;
            position:relative;
        }
        nav{
            position:absolute;
            top:0; left:0;
            height:30px;
        }
        .wrapper {
            background: #263729;
        }
        .page {
            float:left;
            background: #992213;
            min-height: 100%;
            padding-top: 30px;
        }
        #page-1 {
            background: #0C717A;
        }
        #page-2 {
            background: #009900;
        }
        #page-3 {
            background: #0000FF;
        }
        a {
            color:#FFF;
        }
        a.selected{
            color: red;
        }

JavaScript

jQuery(document).ready(function () {
        var pages = jQuery('.page'),
            wrapper = jQuery('.wrapper'),
            menuItems = jQuery('a.scrollitem'),
            wrapperWidth = 100 * pages.height,
            slideWidth = 100/pages.length;

        jQuery.each(pages, function (index, value) {
            var page = jQuery(this);
            var pageContainer = jQuery('#'+page.attr('id')+' > .page-container');
            pageContainer.data('originHeight', page.outerHeight());
        });

        wrapper.css({width:wrapperWidth + '%', height:'auto', marginLeft:0});
        pages.width(slideWidth + '%');

        menuItems.click(function(){
            var menuItem = jQuery(this),
                page = jQuery(menuItem.attr('href')),
                pageContainer = jQuery('#'+page.attr('id')+' > .page-container'),
                height = pageContainer.data('originHeight'),
                slideNumber = page.index('.page'),
                margin = slideNumber * -100 + '%';

            menuItems.removeClass('selected');
            menuItem.addClass('selected');

            wrapper.animate({marginLeft: margin, height: height},{
                duration: 1000,
                start: function () {
                    page.animate({height:height},1000);
                },
                complete: function () {
                    pages.css({height:1,overflow:'hidden'});
                    jQuery(this).css({height:'auto'});
                    page.css({height:'auto',overflow:''});
                }
            });
            return false;
        });
    });