JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://demos.flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js"></script>
<div id="wrapper">
    <div id="mask">
        
        <!-- first row -->
        
        <div id="item1" class="item">
            <a name="item1"></a>
            <div class="content">item1
                <a href="#item1" class="panel">1</a> |
                <a href="#item2" class="panel">2</a> |
                <a href="#item3" class="panel">3</a>
            </div>
        </div>
        
        <div class="item"></div>
        <div class="item"></div>
        <div class="clear"></div>
        
        <!-- second row -->
        
        <div class="item"></div>
        
        <div id="item2" class="item">
            <a name="item2"></a>
            <div class="content">item2 <a href="#item1" class="panel">back</a></div>
        </div>
        
        <div class="item"></div>
        <div class="clear"></div>
        
        <!-- third row -->
        
        <div class="item"></div>
        <div class="item"></div>
        
        <div id="item3" class="item">
            <a name="item3"></a>
            <div class="content">item3 <a href="#item1" class="panel">back</a></div>
        </div>
        
        <div class="clear"></div>
        
    </div>
</div>

CSS

body {
    height:100%;
    width:100%;
    margin:0;padding:0;
}

#wrapper {
    width:100%;
    height:100%;
    position:absolute;
    top:0;left:0;
    background-color:#ccc;
    overflow:hidden;
}

#mask {
    width:500%;
    height:100%;
    
    background-color:#eee;
}

.item {
    width:20%;
    height:100%;
    float:left;
    background-color:#ddd;
}


.content {
    width:400px;
    height:300px;
    top:20%;
    margin:0 auto;
    background-color:#aaa;
    position:relative;
}

.clear {
    clear:both;
}

JavaScript

$(document).ready(function() {
    //get all link with class panel
    $('a').bind('focusin click', function(e) {

        // focusin occurs before click
        if (e.type == 'click') {

            var tar = $(this).attr('href');

            if ($(this).is('.panel')) {
                // clicked on a.panel; scroll to destination
                $('#wrapper').scrollTo(tar, 800);
                //reset and highlight the clicked link
                $('.item').removeClass('selected');
                $(tar).addClass('selected');
                //cancel the link default behavior
                return false;
            } else {
                // clicked on link (not '.panel'), return true in case it's an external link
                return true;
            }

        } else {
            // link was focused 
            var time, item = $(this).closest('.item');
            if (item.is('.selected')) {
                // if item is already in view (position it immediately)
                time = 0;
            } else {
                // item is not in view, so smoothly scroll & update classes
                time = 800;
                $('.item').removeClass('selected');
                item.addClass('selected');
            }
            $('#wrapper').scrollTo(item, time);
        }

    });

    //resize all the items according to the new browser size
    $(window).resize(function() {
        //call the resizePanel function
        resizePanel();
    });

});

function resizePanel() {

    //get the browser width and height
    width = $(window).width();
    height = $(window).height();

    //get the mask width: width * total of items
    mask_width = width * $('.item').length;

    //set the dimension
    $('#wrapper, .item').css({
        width: width,
        height: height
    });
    $('#mask').css({
        width: mask_width,
        height: height
    });

    //if the item is displayed incorrectly, set it to the corrent pos
   ...