JSFiddle - React, Tailwind, and code Playground

HTML

<body>
        <div id="p1" class="page in">
            Page 1
        </div>
        <div id="p2" class="page">
            Page 2
        </div>
    </body>

CSS

html { height: 100%; }
body { 
    position: relative; 
    height: 100%; 
    width: 100%; 
    overflow: hidden;
}
.page {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 100%;
    top: 0;
    transition: left 1s;
}
.page.in {
    left: 0;
    z-index: 1;
}
#p1 {
    background: red;
}
#p2 {
    background: blue;
}

JavaScript

$(document).click(function () {
    $(".page").toggleClass("in");
});