JSFiddle - React, Tailwind, and code Playground

by divyesh25487

HTML

<!doctype html>
<html> 
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" > 
    <meta name="apple-mobile-web-app-capable" content="yes" >
	<title>Reader</title>
        <link type="text/css" href="http://197.242.159.63/reader/demo/css/style.css" rel="stylesheet">
</head>
<body>
    <div id="container"><!-- --></div>
</body>
	<script type="text/javascript" language="javascript" src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.0.min.js"></script>
    <script defer src="http://197.242.159.63/reader/demo/js/interface.js"></script>
</html>

JavaScript

var stage;
var layer;
var groupOne;
var groupTwo;
var groupThree;
var animations;
var width=0;
var height=0;
// half of screen
var halfhorizontalscreen=0;
var halfverticalscreen=0;
// image original dimension
var imageoriginalwidth = 992;
var imageoriginalheight = 1299;
// is there space for two pages?
var twopageview = false;
// group initial X and Y position
var groupX = 0;
var groupY = 0;
// image resized dimension, as per document dimension
var imageresizedheight=0;
var imageresizedwidth=0;
// half of resized image
var halfhorizontalimage=0;
var halfverticalimage=0;
var requestPage = 0;
var pages;
var pageno;
var totalIssuePages=10;
var currentgroup;
var nextgroup;
var previousgroup;
var coverpage=true;
var isTweening=false;

var lastDist = 0;
var startScale = 1;

var fingerCount = 0;
var startX = 0;
var startY = 0;
var curX = 0;
var curY = 0;
var minLength = 10; // the shortest distance the user may swipe
var swipeLength = 0;
var swipeAngle = 0;
var swipeDirection = null;
var somethingIsBeingDraggedIn=false;
var pos = null;

var isTouchSupported; // check device touch event support or not?
var startEvent;
var moveEvent;
var endEvent;

var isZoom=1;
var speed=0.5;
var swipeEasingEffect=Kinetic.Easings.StrongEaseInOut;
var swipeRotation=0;

// set the pages
pages = ["http://197.242.159.63/reader/demo/img/page1.jpg", "http://197.242.159.63/reader/demo/img/page2.jpg", "http://197.242.159.63/reader/demo/img/page3.jpg", "http://197.242.159.63/reader/demo/img/page4.jpg", "http://197.242.159.63/reader/demo/img/page5.jpg", "http://197.242.159.63/reader/demo/img/page6.jpg", "http://197.242.159.63/reader/demo/img/page7.jpg", "http://197.242.159.63/reader/demo/img/page8.jpg", "http://197.242.159.63/reader/demo/img/page9.jpg","http://197.242.159.63/reader/demo/img/page10.jpg"];



function Init(){
	width=parseInt(document.body.clientWidth); 
	height=parseInt(document.body.clientHeight); 
	
	stage = new Kinetic.Stage({
		container: 'container',
		id: 'container',
		width:...