JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container"></div>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.2.min.js"></script>
    <script defer="defer">

JavaScript

var x = -50;
var y = -50;
	
      var stage = new Kinetic.Stage({
        container: 'container',
        width: 1200,
        height: 1200,
      });
	  
	  for (i=0; i<3; i++){
	  x = x + 50;
	  y = y + 50;
	  
      var layer = [];
	  layer[i] = new Kinetic.Layer();
	  
	  var hex = [];
	  hex[i] = new Kinetic.Shape({
        sceneFunc: function(context) {
          context.beginPath();
          context.moveTo(x+25, 0);
          context.lineTo(x+40, 10);
		  context.lineTo(x+40, 25);
		  context.lineTo(x+25, 35);
		  context.lineTo(x+10, 25);
		  context.lineTo(x+10, 10);
          //context.lineTo(50, 25);
        //  context.lineTo(35, 50);
         // context.lineTo(15, 50);
         // context.lineTo(0, 25);
          //context.lineTo(100, 60);
          context.closePath();
          // KineticJS specific context method
          context.fillStrokeShape(this);
        },
        fill: '#00D2FF',
        stroke: 'black',
        strokeWidth: 4,
		draggable: true,
		rotation:0
      });
	  

      // add the triangle shape to the layer
      //layer.add(hex);
	  layer[i].add(hex[i]);

      // add the layer to the stage
      stage.add(layer[i]);
	  
	  }
	  
	  
		stage.on('click tap', function(evt) {
              evt.targetNode.tween = new Kinetic.Tween({
                  node: evt.targetNode,
                  duration: 0.3,
                  rotationDeg: evt.targetNode.rotation()+45,
                  easing: Kinetic.Easings.EaseOut
              });
              evt.targetNode.tween.play();
          });