JSFiddle - React, Tailwind, and code Playground

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.1.js"></script>
    <script>
      window.onload = function() {
        var stage = new Kinetic.Stage({
          container: "container",
          width: 578,
          height: 200
        });
        var layer = new Kinetic.Layer();

        var simpleText = new Kinetic.Text({
          x: 190,
          y: 15,
          text: "Simple Text",
          fontSize: 30,
          fontFamily: "Calibri",
          textFill: "green"
        });
simpleText.on("click",function(){
        alert("Shape click");
        });
        var complexText = new Kinetic.Text({
          x: 100,
          y: 60,
          stroke: '#555',
          strokeWidth: 5,
          fill: '#ddd',
          text: 'COMPLEX TEXT\n\nAll the world\'s a stage, and all the men and women merely players. They have their exits and their entrances.',
          fontSize: 14,
          fontFamily: 'Calibri',
          textFill: '#555',
          width: 380,
          padding: 20,
          align: 'center',
          fontStyle: 'italic',
          shadow: {
            color: 'black',
            blur: 1,
            offset: [10, 10],
            opacity: 0.2
          },
          cornerRadius: 10
        });

        // add the shapes to the layer
        layer.add(simpleText);
        layer.add(complexText);
        stage.add(layer);
      };

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