JSFiddle - React, Tailwind, and code Playground

HTML

<div id="one" class="slide current">dfsdfsdfsd</div>
<div id="two" class="slide">sdfsdfsdf</div>
<div id="three" class="slide">sdfssdfd</div>

CSS

html {
    background:#000;
    }
body {
    position:absolute;
    top:50%;
    left:50%;
    overflow:hidden;
    margin:-320px 0 0 -512px;
    width:1024px;
    height:640px;
    }
#one {
    background:#C00;
    }
#two {
    background:#090;
    }
#three {
    background:#069;
    }
.slide {
    position:absolute;
    top:0;
    left:0;
    margin-left:150%;
    width:100%;
    height:100%;
    background:#FFF;
    -webkit-transform:scale(0.5);
    -moz-transform:scale(0.5);
    -ms-transform:scale(0.5);
    -o-transform:scale(0.5);
    transform:scale(0.5);
    -webkit-transition-duration:0.5s;
    -moz-transition-duration:0.5s;
    -ms-transition-duration:0.5s;
    -o-transition-duration:0.5s;
    transition-duration:0.5s;
    -webkit-transition-property:margin-left, scale;
    -moz-transition-property:margin-left, scale;
    -ms-transition-property:margin-left, scale;
    -o-transition-property:margin-left, scale;
    transition-property:margin-left, scale;
    }
.slide.current {
    margin:0;
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -ms-transform:scale(1);
    -o-transform:scale(1);
    transform:scale(1);
    }
.slide.passed {
    margin-left:-150%;
    }

JavaScript

var slides = document.querySelectorAll('div.slide');

function applyTransform(transform) {
    document.body.style.WebkitTransform = transform;
    document.body.style.MozTransform = transform;
    document.body.style.msTransform = transform;
    document.body.style.OTransform = transform;
    document.body.style.transform = transform;
}

function getTransform() {
    var denominator = Math.max(
        document.body.clientWidth / window.innerWidth,
        document.body.clientHeight / window.innerHeight
    );
    return 'scale(' + (1 / denominator) + ')';
}

document.addEventListener('keydown', function (e) {
    if (e.altKey || e.ctrlKey || e.metaKey) return;
    var current = document.querySelector('div.current'),
        prev = current.previousElementSibling,
        next = current.nextElementSibling;
    switch (e.which) {
        case 39: // Right
                if(next && next.classList.contains('slide')) {
                    current.classList.remove('current');
                    current.classList.add('passed');
                    next.classList.add('current');
                }
        break;
        case 37: // Left
                if(prev && prev.classList.contains('slide')) {
                    current.classList.remove('current');
                    prev.classList.remove('passed');
                    prev.classList.add('current');
                }
        break;
    }
    e.preventDefault();
}, false);

window.addEventListener('resize', function (e) {
    applyTransform(getTransform());
}, false);

window.addEventListener('DOMContentLoaded', function () {
    applyTransform(getTransform());
}, false);