JSFiddle - React, Tailwind, and code Playground

by trolleymusic

HTML

<div id="container">
    <div class="page" id="one">a</div>
    <div class="page" id="two">b</div>
    <div class="page" id="three">c</div>
    <div class="page" id="four">d</div>
</div>

CSS

#container, .page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*-webkit-transform: translate3d(0,0,0);*/
}
#container {
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
}

.page {
    font-size: 1000px;
    line-height: 200px;
    text-indent: 20px;
    color: white;
    text-shadow: 3px 2px 2px grey;
    overflow: hidden;
}

#one {
    background: red;
}
#two {
    left: 100%;
    background: green;
}
#three {
    left: 200%;
    background: blue;
}
#four {
    left: 300%;        
    background: black;
}
#container, .page {
    -webkit-transform: translate3d(0,0,0);   
}