JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container"></div>

CSS

body {
        margin: 0px;
        padding: 20px;
    }
    canvas {
        border: 1px solid #777;
    }

JavaScript

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

            //Dragable Pink box
            var box = new Kinetic.Rect({
                x: 100,
                y: 50,
                width: 100,
                height: 50,
                fill: 'pink',
                stroke: 'black',
                strokeWidth: 2,
                draggable: true,
                // this causes box to be stopped if contacting obstacle
                dragBoundFunc: function (pos) {
                    if (theyAreColliding(box, obstacle)) {
                        // box is touching obstacle
                        // don't let box move down
                        return ({
                            x: pos.x,
                            y: Math.min(obstacle.getY() - box.getHeight() - 1, pos.y)
                        });
                    } else {
                        // box is not touching obstacle
                        // let it move ahead
                        return ({
                            x: pos.x,
                            y: pos.y
                        });
                    }
                }
            });

            box.on('dragmove', function () {
                if (theyAreColliding(box, target)) {
                    // box touched the goal
                    box.setX(100);
                    box.setY(50);
                    alert("Goal!");
                }
            });

            // End goal blue box
            var target = new Kinetic.Rect({
                x: 100,
                y: 200,
                width: 100,
                height: 50,
                fill: 'blue',
                stroke: 'black',
                strokeWidth: 2
            });

            // Obstacle/blocker orange box
            var obstacle = new Kinetic.Rect({
                x: 125,
                y: 145,
...