JSFiddle - React, Tailwind, and code Playground

HTML

<div id="viewContainer">
    <div class="page" id="viewLeft2">I am very left.</div>
    <div class="page" id="viewLeft1">I am left.</div>
    <div class="page" id="center">I am in the middle.<br/>I'm not secret</div>
    <div class="page" id="viewRight1">I am right.</div>
    <div class="page" id="viewRight2">I am very right.</div>
</div>

CSS

html, body, div {margin:0;padding:0;}
body {
    width: 500%; /*500% (= 5x100%) !*/
}
#viewContainer {
    height:300px;
    width:100%;/*100% !*/
    display:table;
}
.page {
    width:20%;
    height:100%;
    display:table-cell;
    border:1px solid red;
    visibility: hidden; /*Hides all of the contents*/
}
.page#center {
    visibility: visible; /*Shows the contents of the center page*/
}

JavaScript

window.scrollTo((document.body.offsetWidth-document.documentElement.offsetWidth)/2, (document.body.offsetHeight-document.documentElement.offsetHeight)/2)
/*
 * window.scrollTo(x,y) is an efficient cross-broser function,
 * which scrolls the document to position X, Y
 * document.body.offsetWidth contains the value of the body's width
 * document.documentElement contains the value of the document's width
 *
 * Logic: If you want to center the page, you have to substract
 * the body's width from the document's width, then divide it
 * by 2.
 */

$(".page").each(function(){this.style.visibility = "visible";})