JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://eightmedia.github.com/hammer.js/hammer.js"></script>
<script src="http://eightmedia.github.com/hammer.js/jquery.hammer.js"></script>
<div id="back-pane">
    <div class="pane-wrap"></div>
</div>
<div id="frame">
    
    <header>
        <a href="#" class="left toggleBackPaneLeft">&larr;</a>
        <span class="title">Header</span>
    </header>
    
    <section id="content" class="toggleBackPaneLeft">Section</section>
    
    <footer>Footer</footer>
</div>

CSS

body, html{
    background:#eee;
    height:100%;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-text-size-adjust: none;
    -webkit-user-select: none;
    }
#frame, #back-pane{
    width: 320px;
    height:100%;
    position:relative; 
    }
#frame{
    -webkit-box-shadow:0 0 10px #000;
    -webkit-transition: all 0.3s ease;
    }
    #frame.openLeft{
        -webkit-transform: translate3d(258px, 0, 0);
        }
    #frame.openRight{
        -webkit-transform: translate3d(-258px, 0, 0);
        }
header, footer{
    height: 47px;
    text-align: center;
    line-height: 47px;
    color: white;
    font-family: arial;
    font-weight: bold;
    text-shadow: 0 1px 0px rgba(0, 0, 0, 0.8);
    font-size: 18px;
    position:relative;
    }

#content, header, footer{
    width:100%;
    }

    #content{
        position:absolute;
        top:47px;
        bottom:47px;
        left:0;
        right:0;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        background:#fefefe;
        }
        header .left, header .right{
            float: left;
            display: inline-block;
            height: 27px;
            width: 27px;
            margin-top: 6px;
            margin-left: 6px;
            line-height: 20px;
            padding: 3px;
            color: #fff;
            text-decoration: none;
            font-weight: bold;
            }
        header .right{
            float:right;
            margin-left:0;
            margin-top: 6px;
            margin-right: 6px;
            }
        header .title{
            position: absolute;
            top: 0;
            bottom: 0;
            left: 50px;
            right: 50px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            }
    footer{
        position:absolute;
        bottom:0;
        width:100%;
        }

#back-pane{
    background:green;
    position:absolute;
    }
  ...

JavaScript

$('.toggleBackPaneLeft').hammer().on('swipe', function(e){
    e.preventDefault();
    $('#frame').toggleClass('openLeft');
});

$('.toggleBackPaneRight').hammer().on('swipe', function(e){
    e.preventDefault();
    $('#frame').toggleClass('openRight');
});

/*
$('#content').hammer().on('swipe', function(e){
    e.preventDefault();
    $('#frame').removeClass('openRight').removeClass('openLeft');
});
*/




});//]]>
</script>
    
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
    
<script type="text/javascript">
//<![CDATA[ 
$(window).load(function(){