JSFiddle - React, Tailwind, and code Playground

by TorchMan

HTML

<link rel="stylesheet" href="http://jakiestfu.github.io/Snap.js/snap.css">
<link rel="stylesheet" href="http://jakiestfu.github.io/Snap.js/demo/assets/demo.css">
    <body>
        <div class="snap-drawers">
            <div class="snap-drawer snap-drawer-left">
				<div>
					<h1>LEFT</h1>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
						Nulla non erat ac leo ultrices blandit sed vel risus. Pellentesque
						facilisis blandit auctor. Maecenas vestibulum vulputate tincidunt.
						Mauris nec quam libero. Fusce eget ligula non leo varius
						condimentum quis ac elit. Donec id urna ut neque semper ultrices.
						Proin ut suscipit felis. Nullam neque felis, ullamcorper
						scelerisque volutpat vel, vehicula vehicula neque. Aenean
						scelerisque elit ac erat sagittis ullamcorper.
					</p>
						
				</div>
			</div>
			<div class="snap-drawer snap-drawer-right">
                <h1>RIGHT</h1>
			    						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
						Nulla non erat ac leo ultrices blandit sed vel risus. Pellentesque
						facilisis blandit auctor. Maecenas vestibulum vulputate tincidunt.
						Mauris nec quam libero. Fusce eget ligula non leo varius
						condimentum quis ac elit. Donec id urna ut neque semper ultrices.
						Proin ut suscipit felis. Nullam neque felis, ullamcorper
						scelerisque volutpat vel, vehicula vehicula neque. Aenean
						scelerisque elit ac erat sagittis ullamcorper.
					</p>
			</div>
        </div>
        
        <div id="content" class="snap-content no-user-select">
            <div id="toolbar">
                <a href="#" id="open-left"></a>
                <h1>Default</h1>
            </div>
            <br/> <br/> <br/>
            <div id="invertTransDiv">
                <div class="infotext">This DIV (with the red border and it's background image) translates inverted</div>
            </div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing...

CSS

.no-user-select{  
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  -o-user-select: none;
  user-select: none;  
}

.snapjs-right .snap-drawer-left {
	display: block;
	right: 0;
	left: auto;
}

/* Hide the actual "Right" drawer in the demo */
.snapjs-right .snap-drawer-right {
	display: block !important;
	right: 0  !important;
	left: auto  !important;
}

.infotext{
    width: 200px;
    margin-top: 50px;
}

#invertTransDiv{
	background: none repeat scroll 0 0 #5E87B0;
	
	background-image: url("http://jakiestfu.github.io/Snap.js/demo/assets/drag.png");
    background-repeat: no-repeat;
	
    border: solid red 2px;
    
    height: 150px;
    left: 50px;
    position: fixed;
    top: 400px;
    width: 200px;
    z-index: 3;
}

JavaScript

/*
 * Snap.js
 *
 * Copyright 2013, Jacob Kelley - http://jakiestfu.com/
 * Released under the MIT Licence
 * http://opensource.org/licenses/MIT
 *
 * Github:  http://github.com/jakiestfu/Snap.js/
 * Version: 1.9.0
 */
/*jslint browser: true*/
/*global define, module, ender*/
(function(win, doc) {
    'use strict';
    var Snap = Snap || function(userOpts) {
        var settings = {
            element: null,

            /*-------------TESTINVERT*/
            invertedDiv: null,
            
            dragger: null,
            disable: 'none',
            addBodyClasses: true,
            hyperextensible: true,
            resistance: 0.5,
            flickThreshold: 50,
            transitionSpeed: 0.3,
            easing: 'ease',
            maxPosition: 266,
            minPosition: -266,
            tapToClose: true,
            touchToDrag: true,
            slideIntent: 40, // degrees
            minDragDistance: 5
        },
        cache = {
            simpleStates: {
                opening: null,
                towards: null,
                hyperExtending: null,
                halfway: null,
                flick: null,
                translation: {
                    absolute: 0,
                    relative: 0,
                    sinceDirectionChange: 0,
                    percentage: 0
                }
            }
        },
        eventList = {},
        utils = {
            hasTouch: (doc.ontouchstart === null),
            eventType: function(action) {
                var eventTypes = {
                        down: (utils.hasTouch ? 'touchstart' : 'mousedown'),
                        move: (utils.hasTouch ? 'touchmove' : 'mousemove'),
                        up: (utils.hasTouch ? 'touchend' : 'mouseup'),
                        out: (utils.hasTouch ? 'touchcancel' : 'mouseout')
                    };
                return eventTypes[action];
            },
            page: function(t, e){
                return (utils.hasTouch...