JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.2-beta.js"></script>
<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
});

// 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,
    width: 50,
    height: 10,
    fill: 'orange',
    stroke: 'black',
    strokeWidth: 2
})

layer.add(box);
layer.add(obstacle)
layer.add(target);
stage.add(layer);