JSFiddle - React, Tailwind, and code Playground

by jakie8

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"><p>Look, just because I don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone into a glass motherfuckin' house, fuckin' up the way the nigger talks. Motherfucker do that shit to me, he better paralyze my ass, 'cause I'll kill the motherfucker, know what I'm sayin'? </p>

    <p>Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No? Well, that's what you see at a toy store. And you must think you're in a toy store, because you're here shopping for an infant named Jeb. </p>
    
    <p>Normally, both your asses would be dead as fucking fried chicken, but you happen to pull this shit while I'm in a transitional period so I don't wanna kill you, I wanna help you. But I can't give you this case, it don't belong to me. Besides, I've already been through too much shit this morning over this case to hand it over to your dumb ass. </p>
    
    <p>Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass. </p>
    
    <p>You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it...

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('tap', function(e){
    e.preventDefault();
    $('#frame').toggleClass('openLeft');
});

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

$('#content').hammer().on('tap', 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(){