JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.6.0.min.js"></script>
<div id="testBlock">Init</div>

JavaScript

var handler = function(e) {
    console.log("Event fired.");
    alert("Event fired.");
};

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

var layer = new Kinetic.Layer();
var group = new Kinetic.Group();

var rect = new Kinetic.Rect({
    x: 75,
    y: 10,
    width: 50,
    height: 50,
    fill: 'silver',
});

line = new Kinetic.Line({
    points: [
        {x: 125, y: 10},
        {x: 125, y: 160},
    ],
    stroke: 'black',
    strokeWidth: 10
});
        
// add the shapes to the group
group.add(rect);
group.add(line);

group.fire("handler");
        
// event handler for the group
        /*
group.on("click", function(e) {
    console.log("Event fired.");
    alert("Event fired.");
});*/
        
// add the group to the layer
layer.add(group);

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