JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      canvas {
        border: 1px solid #9C9898;
      }
    </style>
    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.3.js"></script>
    <script>
      window.onload = function() {
        var stage = new Kinetic.Stage({
          container: 'container',
          width: 578,
          height: 200
        });

        var layerBlue = new Kinetic.Layer();
        var layerRed = new Kinetic.Layer();

        var rectBlue = new Kinetic.Rect({
          x: 100,
          y: 75,
          width: 100,
          height: 50,
          fill: 'blue',
          stroke: 'black',
          strokeWidth: 4
        });
        var rectRed = new Kinetic.Rect({
          x: 300,
          y: 75,
          width: 100,
          height: 50,
          fill: 'red',
          stroke: 'black',
          strokeWidth: 4
        });
        
        // mouse events
        rectBlue.on('click', function() {
          stage.add(layerRed);
          stage.draw();
        });
        rectRed.on('click', function() {
          layerRed.remove();
          stage.draw();
        });
        
        // add the shape to the layer
        layerBlue.add(rectBlue);
        layerRed.add(rectRed);

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

    </script>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>