JSFiddle - React, Tailwind, and code Playground

by Tenderfeel

HTML

<div id="home" data-role="page">
    <div class="toolbar">
        <h1>Home</h1>
    </div>
    <div class="content">
        <ul class="nav">
            <li><span data-href="#about" class="touch">About</span></li>
        </ul>
    </div>
</div>
<div id="about" data-role="page">
    <div class="toolbar">
        <h1>About</h1>
        <span class="button back leftButton touch" data-href="#">Home</span>
    </div>
    <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi convallis porttitor erat, vitae aliquet erat rutrum et. Nullam ultricies aliquet dapibus. Vestibulum viverra metus et magna fermentum sed convallis ipsum sollicitudin. Cras ullamcorper ante eget felis faucibus consectetur. Maecenas vel arcu quis mi tincidunt porttitor. Donec a nibh nisi, nec mollis mauris. Fusce a orci neque, in ullamcorper mauris. Morbi orci lacus, lacinia non dapibus sed, mattis in nunc. Integer eu dapibus dolor. Vestibulum feugiat commodo fringilla. Ut a gravida neque. </p>
    </div>
</div>

CSS

/* html5 Reset */
html,body,div,span,h1,h2,h3,h4,h5,h6,p,em,img,small,strong,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,nav,section{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}body{line-height:1;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}nav ul{list-style:none;}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;}

/*
Copyright (c) 2010, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.com/yui/license.html
version: 3.3.0
build: 3167
*/
body{font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}select,input,button,textarea{font:99% arial,helvetica,clean,sans-serif;}table{font-size:inherit;font:100%;}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}

html,body{
    height:100%;
    min-height:100%;
    position:relative;
    -webkit-user-select: none;
}

html{
}
body {
    /*-webkit-tap-highlight-color: rgba(0,0,0,0);*/
    -webkit-touch-callout: none;
}


a,.touch {
   -webkit-touch-callout: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    text-decoration: none;
}

.selectable, input, textarea {
    -webkit-user-select: auto;
}

.notransform {
    -webkit-transform: none !important;
}

[data-role=page] {
    -webkit-box-sizing: border-box;
    display: none;
    left: 0;
    min-height: 100%;
    overflow-x: hidden;
    position: absolute;
    width: 100%;
    /*-webkit-transform: translateX(100%);*/
    z-index: 1;
}

.current {
    display: block !important;
    /*-webkit-transform: translateX(0);*/
    /*z-index: 10;*/
}

.show {
    display: block !important;
}

.in,.out {
    -webkit-animation-duration: 300ms;
    -webkit-animation-fill-mode:both;
    -webkit-animation-timing-function: ease-in-out;
}


#console {
    position: absolute;
   ...

JavaScript

(function($) {
    $.jQTouch = function(options) {
            var defaults = {
                debug:true,
                hoverDelay: 50,
                pressDelay: 1000,
                moveThreshold: 10,
                backSelector: '.back, .cancel, .goback',
                touchSelector: '.touch',
            };
            
         var lastTime = 0,
             jQTSettings={},
             initialPageId = '',
             $currentPage='',
             hist=[],
             touchSelectors=[];
             
        var $about = $('#about');
         
        function _debug(message) { 
            now = (new Date).getTime();
            delta = now - lastTime;
            lastTime = now;
            if (jQTSettings.debug) {
                if (message) {
                    _log(delta + ': ' + message);
                } else {
                    _log(delta + ': ' + 'Called ' + arguments.callee.caller.name);
                }
            }
        }
        function _log(message) {
            if (window.console !== undefined) {
                console.log(message);
            }
        }
        
        function touchStartHandler(e) {
            
            var startTime = (new Date).getTime(),
                hoverTimeout = null,
                pressTimeout = null,
                touch,
                startX,
                startY,
                deltaX = 0,
                deltaY = 0,
                deltaT = 0;
            
            var $el = $(this);
            
            if (event.changedTouches && event.changedTouches.length) {
                touch = event.changedTouches[0];
                startX = touch.pageX;
                startY = touch.pageY;
            }
            

            hoverTimeout = setTimeout(function() {

            }, jQTSettings.hoverDelay);

            pressTimeout = setTimeout(function() {
               ...