JSFiddle - React, Tailwind, and code Playground

HTML

<body scroll="yes | no">


<div id="page1">

    <div id="swipe1">
             >> 
    </div>
</div>

<div id="page2">
       <div id="swipe2">
              >> 
        </div>
</div>

<div id="page3">
        <div id="swipe3">
            >> 
        </div>
</div>

<div id="page4">
        <div id="swipe4">
            >> 
        </div>
</div>

<div id="page5">
        <div id="swipe5">
            >> 
        </div>
</div>

<div id="page6">
        <div id="swipe6">
            >> 
        </div>
</div>

<div id="page7">
        <div id="swipe7">
            >> 
        </div>
</div>

<div id="page8">
        <div id="swipe8">
            >> 
        </div>
</div>

CSS

body{
    padding:0;
    margin: 0;
 overflow:hidden;
 
}
#page1{
    width:100%;
    height:100%;
    background:
    radial-gradient(black 15%, transparent 16%) 0 0,
    radial-gradient(black 15%, transparent 16%) 8px 8px,
    radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
    radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
    background-color:#282828;
    background-size:20px 20px;
    position:absolute;
    top:0;
    left:0;
}
#page2{
    width:100%;
    height:100%;
    background: rgba(118, 185, 57, 0.7);
    position:absolute;
    top:100%;
    left:0;
}
#page3{
    width:100%;
    height:100%;
    background: rgba(177, 105, 0, 0.7);
    position:absolute;
    top:100%;
    left:100%;
}
#page4{
    width:100%;
    height:100%;
    background: rgba(0, 205, 250, 0.7);
    position:absolute;
    top:200%;
    left:100%;
}

#page5{
    width:100%;
    height:100%;
    background: rgba(0, 205, 250, 0.7);
    position:absolute;
    top:200%;
    left:0;
}
#page6{
    width:100%;
    height:100%;
    background: rgba(0, 205, 250, 0.7);
    position:absolute;
    top:200%;
    left:-100%;
}
#page7{
    width:100%;
    height:100%;
    background: rgba(0, 205, 250, 0.7);
    position:absolute;
    top:100%;
    left:-100%;
}
#page8{
    width:100%;
    height:100%;
    background: rgba(0, 205, 250, 0.7);
    position:absolute;
    top:0;
    left:-100%;
}






#swipe1{
    background: rgba(255,255,255, 0.4);
    width: 150px;
    height: 100%;
    float:right;
    text-align: center;
    padding-top: 35%;
}
#swipe3{
    background: rgba(255,255,255, 0.4);
    width: 150px;
    height: 100%;
    float:right;
    text-align: center;
    padding-top: 35%;
}

JavaScript

var currentWidth = document.body.offsetWidth;  
var currentHeight = document.body.offsetHeight; 

document.body.onresize=function(){


document.getElementById("page1").style.width=currentWidth;
document.getElementById("page1").style.height=currentHeight;

document.getElementById("page2").style.width=currentWidth;
document.getElementById("page2").style.height=currentHeight;

document.getElementById("page3").style.width=currentWidth;
document.getElementById("page3").style.height=currentHeight;

document.getElementById("page4").style.width=currentWidth;
document.getElementById("page4").style.height=currentHeight;

document.getElementById("page5").style.width=currentWidth;
document.getElementById("page5").style.height=currentHeight;

document.getElementById("page6").style.width=currentWidth;
document.getElementById("page6").style.height=currentHeight;

document.getElementById("page7").style.width=currentWidth;
document.getElementById("page7").style.height=currentHeight;

document.getElementById("page8").style.width=currentWidth;
document.getElementById("page8").style.height=currentHeight;

}

var prevent = function(event) {

    window.scrollTo(0,0);
    event ? event.preventDefault() : window.event.returnValue = false;
};

if(window.addEventListener) {
    var array = ['DOMMouseScroll', 'mousewheel', 'scroll'],
        i = array.length;
    while(i--) {
        window.addEventListener(array[i], prevent, false);
    }
}
else window.onmousewheel = document.onmousewheel = window.onscroll = prevent;




            function calctop(x_ele) {
                    var x_ret=0;
                    var oParent = x_ele.offsetParent;
                    if(oParent == null) return 0;
                    else x_ret=x_ele.offsetTop + oParent.clientTop +calctop(oParent);
                    return x_ret
                        }

                document.getElementById("swipe1").onclick=function(){
                        y=calctop(document.getElementById("page2"));
               ...