JSFiddle - React, Tailwind, and code Playground

by ConTrast77

HTML

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.6.0.min.js"></script>
    <div id="container"></div>
    <div id="buttons">
      <button id="show">
        show
      </button>
      <button id="hide">
        hide
      </button>
    </div>

JavaScript

var stage = new Kinetic.Stage({
	  container: 'container',
	  width: 578,
	  height: 200
	});
	var layer = new Kinetic.Layer();

	var buttonLR = [];
	var pageList = [];
	var book_xx = 200.5;
	var book_yy = 50.5;
	for (i = 9; i>=0; i--) { 
		(function() {
			var book_x = book_xx +(i*4);
			var book_y = book_yy +(i*4);
			var pageListFF = new Kinetic.Shape ({
			  drawFunc: function(canvas) {
				var context = canvas.getContext();
				context.beginPath();
				context.moveTo(book_x,book_y);
				context.lineTo(book_x,book_y +20);
				context.lineTo(book_x +20,book_y +20);
				context.lineTo(book_x +20,book_y);
				context.closePath();
				canvas.fillStroke(this);
			  },
			  fill: '#AAE',
			  stroke: '#888',
			  strokeWidth: 2,
			  visible: true,
			  name: 'kvadrat0'+i.toString(10)
			});

			pageList[0 +i*2] = pageListFF;
			layer.add(pageListFF);
		})();
		
        (function() {
			var book_x = book_xx +50 +(i*4);
			var book_y = book_yy +(i*4);
			var pageListFF = new Kinetic.Shape ({
			  drawFunc: function(canvas) {
				var context = canvas.getContext();
				context.beginPath();
				context.moveTo(book_x,book_y);
				context.lineTo(book_x,book_y +20);
				context.lineTo(book_x +20,book_y +20);
				context.lineTo(book_x +20,book_y);
				context.closePath();

				// drawing
				canvas.fillStroke(this);
			  },
			  fill: '#AAE',
			  stroke: '#888',
			  strokeWidth: 2,
			  visible: true,
			  name: 'kvadrat1'+i.toString(10)
			});

			pageList[1 +i*2] = pageListFF;
			layer.add(pageListFF);
		})();
    }

	// add the layer to the stage
	stage.add(layer);

	pageList[0].on('mouseover touchstart', function() {
	  this.setFill('#FCC');
	  layer.draw();
	});
	pageList[0].on('mouseout touchend', function() {
	  this.setFill('#CCF');
	  layer.draw();
	});
	pageList[1].on('mouseover touchstart', function() {
	  this.setFill('#FCC');
	  layer.draw();
	});
	pageList[1].on('mouseout touchend', function() {
	  this.setFill('#CCF');
	  layer.draw();
	});


	// add...