JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <ul class="links">
        <li><a href="#" class="up">up</a></li>
        <li><a href="#" class="down">down</a></li>
        <li><a href="#"  class="right">left</a></li>
        <li><a href="#"  class="left">right</a></li>

    </ul>
    <div class="horizontal-wrapper">
        <div id="block1">
            <div class="text-block">
                <h2>Lorem ipsum dolor sit amet1</h2>
                <p>consectetur
                    adipisicing elit. Animi consectetur debitis error iusto quam
                    quisquam similique ut. Adipisci animi aspernatur, aut do</p>
            </div>
        </div>
        <div id="block2">
            <div class="text-block">
                <h2>Lorem ipsum dolor sit amet2</h2>
                <p>consectetur
                    adipisicing elit. Animi consectetur debitis error iusto quam repellat tenetur voluptas</p>
            </div>
        </div>
        <div id="block3">
            <div class="text-block">
                <h2>Lorem ipsum dolor sit amet3</h2>
                <p>consectetur
                    adipisicing elit. Animi consectetur debitis error iusto quam
                    quisquam similique ut. Adipisci animi aspernatur, </p>
            </div>
        </div>
    </div>
    <div class="vertical-wrapper">
        <div id="block4">
            <div class="text-block">
                <h2>Lorem ipsum dolor sit amet</h2>
                <p>consectetur
                    adipisicing elit. Animi consectetur debitis error iusto quam</p>
            </div>
        </div>
        <div id="class3">

        </div>
        <div id="block5">
            <div class="text-block">
                <h2>Lorem ipsum dolor sit amet</h2>
                <p>consectetur
                    adipisicing elit. Animi consectetur debitis error iusto quam</p>
            </div>
        </div>
    </div>
</div>

CSS

.wrapper{
        overflow: hidden;
        position: relative;
    }
    #block1, #block2, #block3, #block4, #block5 {
        width: 2056px;
        height: 900px;
        position: relative;
        background: url("bg.png") 0 no-repeat grey;
        background-size: 100%;

    }
    .horizontal-wrapper div {
        display: inline-block;
        float: left;
    }
    #class3 {
        width: 2000px;
        position: relative;
        background: none;
    }
    .vertical-wrapper {
    }
    .horizontal-wrapper {
        width: 9000px!important;

    }
    .wrapper .links {
        position: fixed;
        z-index: 16;
        top: 0;
    }
    .go{
        position: relative;
    }
    .links{
        list-style: none;
    }
    .text-block{
        background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.59);
        width: 69% !important;
        padding: 44px;
        height: 60%!important;
        border: 1px solid;
        position: absolute;
        margin: 6% 14%;
    }
    .text-block h2{
        text-align: center;
        font-size: 50px;
    }
    .text-block p{
        font-size: 30px;
        text-align: left;
    }
    .left{
        position: fixed;
        right: 20px;
        top: 37%;
        background: url('img/right.png') no-repeat scroll 0% 0% / 100% auto transparent;
        height: 155px;
        width: 44px;
    }
    .up{
        position: fixed;
        left: 44%;
        top: 10px;
        background: url("img/up.png") no-repeat;
        background-size: 100%;
        width: 207px;
        height: 54px;
    }
    .down{
        position: fixed;
        bottom: 2px;
        left: 44%;
        background: url("img/down.png") no-repeat;
        background-size: 100%;
        width: 207px;
        height: 54px;
    }
    .right{
        position: fixed;
        top: 37%;
        background: url('img/left.png') no-repeat;
        background-size: 100%;
        height: 157px;
        width: 34px;
    }
h2{
    margin: 0;
}
}

JavaScript

var width;
var height;
    (function(){
        $(document).ready(function(){
            $(window).on('resize',function(){
                width = $(window).width();
                height =$(window).height();
                $('.wrapper  div').css({width: width + "px", height: height + "px"});

                $('#block1').css({ marginLeft:  -width + "px"});
                $('.vertical-wrapper').css({ marginTop: -(height+height) + "px"});
            });

            $(window).resize();
        });
        $('.up').click(function(){
            $('#block4').animate({marginTop: "+=" + height});
        });
        $('.down').click(function(){
            $('#block4').animate({marginTop: "-=" + height});
        });
        $('.right').click(function(){
            $('.horizontal-wrapper').animate({marginLeft: "+=" + width});
           
            var id = $('#block1').attr('id');
            var left = $('.horizontal-wrapper').position().left;
            if( id == 'block1'){
                $('.right').hide();
            }else{
                $('.right').show();
            };
        });
        $('.left').click(function(){
            $('.horizontal-wrapper').animate({marginLeft: "-=" + (width)});
        });

        

    })();