JSFiddle - React, Tailwind, and code Playground

HTML

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

    
  
  </body>

CSS

body {
margin: 0px;
padding: 0px;
background:#F1F1F1;
width:100%;
}
      
#container {
margin: auto;
width:100%;
position:absolute;
}

JavaScript

function writeMessage(message) {
        text.setText(message);
        layer.draw();
      }

     var stage = new Kinetic.Stage({
     	container: 'container',
    	width:  800, 
    	height: 800 
	});

      
       var layer = new Kinetic.Layer();
      
      // orange small triangle//
      var orangepoly = new Kinetic.Line({
        x: 326,
        y: 26,
        points: [2, 2, 138, 138, 138, 2],
        fill: '#FF7F45',
        stroke: 'black',
        lineJoin: 'round',
        strokeWidth: 6,
        rotation: 135,
    	closed: true,
        draggable: true,
		offset: {x:68, y:68}
      });
      
	// yellow  square//
      var square = new Kinetic.Rect({
        x: 226,
        y: 122,
        width: 137,
        height: 137,
        fill: '#FFE559',
        stroke: 'black',
        lineJoin: 'round',
        strokeWidth: 6,
        draggable: true,
        rotation: 45,
        offset: {x:68, y:68}
      });    
     
    // white small  triangle//
      var whitepoly = new Kinetic.Line({
        x: 132,
        y: 26,
        points: [2, 2, 138, 138, 138, 2],
        fill: '#ffffff',
        stroke: 'black',
        lineJoin: 'round',
        strokeWidth: 6,
        rotation: 135,
        closed: true,
        draggable: true,
		offset: {x:68, y:68}
      });
      
    // white big triangle//
      var whitebigpoly = new Kinetic.Line({
       	x: 420,
        y: 220,
       	points: [0, 0, 0, 274, 274, 274],
        fill: '#ffffff',
        stroke: 'black',
        lineJoin: 'round',
        strokeWidth: 6,
        rotation: 45,
        closed: true,
        draggable: true,
		offset: {x:137, y:137}
      });
   
     // red medium triangle//
      var redpoly = new Kinetic.Line({
        x: 323,
        y: 317,
        points: [0, 0, 0, 194, 194, 194],
        fill: '#E93368',
        stroke: 'black',
        lineJoin: 'round',
        strokeWidth: 6,
        closed: true,
        draggable: true,
        offset: {x:97, y:97}
      });

     //...