JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" media="all" href="style/default.css" />
    <title>MatTheCat</title>
</head>
<body>
    <div id="wrapper">
        <section class="column" id="about">
            <h1 class="slide"><div class="strut"></div>Page 1</h1>
            <h1 class="slide"><div class="strut"></div>Page 2</h1>
        </section>
    </div>
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
</body>
</html>

CSS

@font-face {
    font-family: 'OpenSans Light';
    src: url('fonts/opensans/opensans-light.eot');
    src: url('fonts/opensans/opensans-light.eot?#iefix') format('embedded-opentype'),
    url('fonts/opensans/opensans-light.woff') format('woff'),
    url('fonts/opensans/opensans-light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

html,body {
    margin:0;
    padding:0;
    height:100%;
    font-size:100%;
}
body {
    font-family: 'OpenSans Light','Segoe UI Light','Ubuntu Light',sans-serif;
    overflow:hidden;
}
a img { border:0; }
img {
    vertical-align:middle;
    max-width:100%;
}

.strut {
    display:inline-block;
    vertical-align:middle;
    height:100%;
    width:0;
}

#wrapper {
    height:100%;
    white-space:nowrap;
}
#wrapper > .column {
    display:inline-block;
    vertical-align:top;
    height:100%;
    width:100%;
    white-space:normal;
    position:relative;
}
#wrapper > .column > .slide {
    height:100%;
}
h1 {
    font-size:5em;
    font-weight:300;
    margin:0;
    display:inline-block;
    vertical-align:middle;
    width:100%;
    text-align:center;
}

JavaScript

$(function() {
    var jsVendor = (/webkit/i).test(navigator.appVersion) ? 'webkit' :
            (/firefox/i).test(navigator.userAgent) ? 'Moz' :
                (/trident/i).test(navigator.userAgent) ? 'ms' :
                    'opera' in window ? 'O' : '',
        cssVendor = '-' + jsVendor.toLowerCase() + '-',

        isAndroid = (/android/gi).test(navigator.appVersion),
        isIDevice = (/iphone|ipad/gi).test(navigator.appVersion),
        isPlaybook = (/playbook/gi).test(navigator.appVersion),
        isTouchPad = (/hp-tablet/gi).test(navigator.appVersion),

        has3d = jsVendor+'Perspective' in document.documentElement.style,
        hasTouch = 'ontouchstart' in window && !isTouchPad,
        hasTransition = jsVendor + 'Transition' in document.documentElement.style,
        hasTransform = jsVendor + 'Transform' in document.documentElement.style,

        body = $('body'),
        columns = $('#wrapper > .column'),
        slideX= 0,
        slideY= 0,
        refAnimationTime=300;

    if(hasTransition && hasTransform) {
        columns.css(cssVendor+'transition',cssVendor+'transform '+(refAnimationTime*2) + 'ms ease');
    }

    function moveToSlide(x,y) {
        var moveY = y ? y+'00%' : '0%';
        columns.eq(x).css(cssVendor+'transform','translate' + (has3d ? '3d(0,-'+moveY+',0)' : 'Y(-'+moveY+')'));
        slideY = y;
    }

    body.on('keydown',function(evt) {
        switch(evt.keyCode) {
            case 38:
                moveToSlide(slideX,slideY-1);
                break;
            case 40:
                moveToSlide(slideX,slideY+1);
                break;
        }
    });
});