JSFiddle - React, Tailwind, and code Playground

by jakie8

HTML

<div id="frame">
    <header>Image Test</header>
    <section id="content">
        <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>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>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>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>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><a href="http://placehold.it/320x150" rel="twitPuff"><img src="http://placehold.it/260x150"></a></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...

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{
    width: 320px;
    height:100%;
    position:relative; 
}
header, footer{
    height: 47px;
    background: #C00 url(http://streetleague.wpengine.netdna-cdn.com/wp-content/themes/sls2012/images/nav-big.png) center center repeat-x;
    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;
}

#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;
}
p{
    padding:20px;
}
footer{
    position:absolute;
    bottom:0;
    width:100%;
    background-color:#333;
}

JavaScript

var twitPuff = (function () {
    function openPuff(imgUrl) {
        if (typeof imgUrl == undefined) {
            return;
        }
        $('#tw-puff-blanket').css({
            display: 'block',
            lineHeight: window.innerHeight + 'px'
        });
        $('#tw-puff-blanket').html('<img>');
        $('#tw-puff-blanket img').attr('src', imgUrl).load(function () {
            $('#tw-puff-blanket').addClass('blanket-on');
            $('#tw-puff-wrap').addClass('frame-puff');
        });
    }

    function closePuff() {
        $('#tw-puff-blanket').removeClass('blanket-on');
        $('#tw-puff-wrap').removeClass('frame-puff');
        setTimeout(function () {
            $('#tw-puff-blanket').css({
                display: 'none'
            }).html('');
        }, 300);
    }

    function listen(selector) {
        $(document).on('click', selector, function (e) {
            e.preventDefault();
            var url = $(this).attr('href');
            openPuff(url);
        });
        $(document).on('click', '#tw-puff-blanket', function (e) {
            e.preventDefault();
            closePuff();
        });
    }

    function initialize(opts) {
        opts = $.extend({
            selector: 'a[rel="twitPuff"]',
            background: '#000',
            speed: '0.4s',
            easing: 'ease',
            startScale: '0.8',
            endScale: '1.2'
        }, opts);
        if ($('#tw-puff-wrap').length == 0) {
            $('body').wrapInner('<div id="tw-puff-wrap"></div>');
        }
        if ($('#tw-puff-blanket').length == 0) {
            $('body').append('<a id="tw-puff-blanket" href="#"></a>');
        }
        $('head').append('<style type="text/css">#tw-puff-wrap{-webkit-transition: all ' + opts.speed + ' ' + opts.easing + ';width:100%;height:100%;}#tw-puff-blanket{position:fixed;background:' + opts.background + ';top:0;left:0;right:0;bottom:0;opacity:0;display:none;text-decoration:none;}#tw-puff-blanket, #tw-puff-blanket...