JSFiddle - React, Tailwind, and code Playground

by b_m_h

HTML

<div id="console">
            <h3>Console:</h3>
        </div>
        <div id="tester">Action Area!</div>

CSS

body {
            font-family: Arial, Helvetica, sans-serif;
            margin: 0;
            padding: 0;
            
            -webkit-user-select: none;
                    user-select: none;
        }
        
        #tester {
            width: 100%;
            position: absolute;
            top: 0;
            bottom: 50%;
            background-color: #ccc;
            text-align: center;
            text-shadow: 0 1px 0 #fff;
            font-weight: bold;
            color: #666;
        }
        
        #console {
            position: absolute;
            top: 50%;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: #eee;
            border: 1px solid #ccc;
            padding: 10px;
            overflow-y: scroll;
            -webkit-overflow-scrolling: touch;
        }
            #console h3 {
                font-size: 15px;
                margin: 0;
                border-bottom: 1px solid #000;
                padding-bottom: 5px;
                margin-bottom: 10px;
            }
            #console div.output-message {
                font-family: monospace;
                line-height: 25px;
            }
                #console div.output-message span.time {
                    float: right;
                    font-size: 10px;
                }
            
            #console div.output-message.persistent {
                position: absolute;
                bottom: 0;
                left: 10px;
                right: 10px;
                color: #aaa;
            }

JavaScript

(function(e){function d(){var e=o();if(e!==u){u=e;i.trigger("orientationchange")}}function E(t,n,r,i){var s=r.type;r.type=n;e.event.dispatch.call(t,r,i);r.type=s}e.attrFn=e.attrFn||{};var t=navigator.userAgent.toLowerCase(),n=t.indexOf("chrome")>-1&&(t.indexOf("windows")>-1||t.indexOf("macintosh")>-1||t.indexOf("linux")>-1)&&t.indexOf("chrome")<0,r={swipe_h_threshold:50,swipe_v_threshold:50,taphold_threshold:750,doubletap_int:500,touch_capable:"ontouchstart"in document.documentElement&&!n,orientation_support:"orientation"in window&&"onorientationchange"in window,startevent:"ontouchstart"in document.documentElement&&!n?"touchstart":"mousedown",endevent:"ontouchstart"in document.documentElement&&!n?"touchend":"mouseup",moveevent:"ontouchstart"in document.documentElement&&!n?"touchmove":"mousemove",tapevent:"ontouchstart"in document.documentElement&&!n?"tap":"click",scrollevent:"ontouchstart"in document.documentElement&&!n?"touchmove":"scroll",hold_timer:null,tap_timer:null};e.isTouchCapable=function(){return r.touch_capable};e.getStartEvent=function(){return r.startevent};e.getEndEvent=function(){return r.endevent};e.getMoveEvent=function(){return r.moveevent};e.getTapEvent=function(){return r.tapevent};e.getScrollEvent=function(){return r.scrollevent};e.each(["tapstart","tapend","tap","singletap","doubletap","taphold","swipe","swipeup","swiperight","swipedown","swipeleft","swipeend","scrollstart","scrollend","orientationchange"],function(t,n){e.fn[n]=function(e){return e?this.bind(n,e):this.trigger(n)};e.attrFn[n]=true});e.event.special.tapstart={setup:function(){var t=this,n=e(t);n.bind(r.startevent,function(e){n.data("callee",arguments.callee);if(e.which&&e.which!==1){return false}var...