JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://kineticjs.com/download/kinetic-v4.0.2.min.js"></script>
<section id="container">

</section>

JavaScript

var stage = new Kinetic.Stage({
    container: "container",
    width: 620,
    height: 280
});

var contentLayer = new Kinetic.Layer();
var controlLayer = new Kinetic.Layer();

var shape1 = new Kinetic.Circle({
    x: 120,
    y: 120,
    radius: 70,
    fill: "#FF0000"
});
contentLayer .add(shape1);

var shape2 = new Kinetic.Rect({
    x: 420,
    y: 120,
    width: 100,
    height: 40,
    fill: "#0000FF"
});
contentLayer .add(shape2);

var zoomLabel = new Kinetic.Text({
    x: 10,
    y: 30,
    textFill: "#000000",
    fontSize: 8,
    text: "Zoom in/out"
});
controlLayer.add(zoomLabel);

var zoomIn = new Kinetic.Rect({
    x: 10,
    y: 10,
    width: 10,
    height: 10,
    fill: "#00FFFF"
});
zoomIn.on("click", function() {
    if(contentLayer.getScale().x < 2.1) {
        contentLayer.setScale(contentLayer.getScale().x+0.1);
        contentLayer.draw();
    }
});         
controlLayer.add(zoomIn);

var zoomOut = new Kinetic.Rect({
    x: 25,
    y: 10,
    width: 10,
    height: 10,
    fill: "#00FFFF"
});
zoomOut.on("click", function() {
    if(contentLayer.getScale().x > 0.2) {
        contentLayer.setScale(contentLayer.getScale().x-0.1);
        contentLayer.draw();
    }
});
controlLayer.add(zoomOut);

var panLabel = new Kinetic.Text({
    x: 10,
    y: 245,
    textFill: "#000000",
    fontSize: 8,
    text: "Pan left/right"
});
controlLayer.add(panLabel);

var panLeft = new Kinetic.Rect({
    x: 10,
    y: 260,
    width: 10,
    height: 10,
    fill: "#FF00FF"
});
panLeft.on("click", function() {
    if(contentLayer.getX() > -480) {
        contentLayer.setX(contentLayer.getX()-20);
        contentLayer.draw();
    }
});
controlLayer.add(panLeft);

var panRight = new Kinetic.Rect({
    x: 25,
    y: 260,
    width: 10,
    height: 10,
    fill: "#FF00FF"
});
panRight.on("click", function() {
    if(contentLayer.getX() < 480) {
        contentLayer.setX(contentLayer.getX()+20);
        contentLayer.draw();
   ...