JSFiddle - React, Tailwind, and code Playground

HTML

<link type="text/css" href="http://197.242.159.63/reader/demo/css/style.css" rel="stylesheet">

<body>
    <div id="container"><!-- --></div>
</body>


<script type="text/javascript" language="javascript" src="http://197.242.159.63/reader/html5/js/Raf.js"></script>
<script type="text/javascript" language="javascript" src="http://197.242.159.63/reader/html5/js/Animate.js"></script>
    <script type="text/javascript" language="javascript" src="http://197.242.159.63/reader/html5/js/Scroller.js"></script>
	<script type="text/javascript" language="javascript" src="http://197.242.159.63/reader/html5/js/kinetic-v4.6.0.js"></script>

JavaScript

// document dimensions
	var width = $(document).width();	
	var height = $(document).height();	

	// half of screen
	var halfhorizontalscreen = width / 2;	
	var halfverticalscreen = height / 2;	

	// image original dimension
	var imageoriginalwidth = 992;
	var imageoriginalheight = 1299;

	// is there space for two pages?
	var twopageview = true;
	// group initial X and Y position
	var groupX = 0;
	var groupY = 0;

	// image resized dimension, as per document dimension
	var imageresizedheight = ((imageoriginalheight > height)? height : imageoriginalheight);	
	var imageresizedwidth = imageresizedheight * (imageoriginalwidth/imageoriginalheight);	
	if(imageresizedwidth > width){
		// image width is greater than document width; so need to set image widht equal to document widht and calculate height accordingly
		imageresizedwidth = width;
		imageresizedheight = width / (imageoriginalwidth/imageoriginalheight);
	}

	// half of resized image
	var halfhorizontalimage = imageresizedwidth / 2;
	var halfverticalimage = imageresizedheight / 2;

	// set the stage
	var stage = new Kinetic.Stage({
		container: 'container',
		width: width,
		height: height
	});
	
	zoomLayer = new Kinetic.Layer({
		id:'zoomlayer'	
	});
	zoomGroup = new Kinetic.Group({
		x:0,
		y:0,
		width:width,
		height:height,
		draggable: false,
		id:'zoomgroup'
	});
	zoomLayer.add(zoomGroup);	

	// layer
	var layer = new Kinetic.Layer();

	// can handle two pages?
	if( width >= (imageresizedwidth * 2)){
		// yes, two page can be handled
		twopageview = true;
	}

	// create new group
	var group1 = new Kinetic.Group({
		x: groupX,
		y: groupY,
		draggable: false,
		name:'grp1'
	});

	// set the pages
	var pages = ["http://197.242.159.63/reader/demo/img/page1.jpg"];

	var loadedPage = 0;
	function loadPage(pageNo, groupName){
		// check for valid page number
		if(pageNo < 1){
			return false;
		}

		// check for valid group name
		if($.trim(groupName) == ""){
			return false;
		}

		var pageX =...