JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.2.min.js"></script>
<div id="container"></div>

<form>
<input type="file" id="imageLoader" name="imageLoader" />
<br>
<br>
<input type="text" id="textBox" placeholder="Your Text"><br>
    <input type="text" id="textBox2" placeholder="Your Text">
<br>Text Size:
<input type="range" id="textSize" min="4" max="100" step="1" value="30" />
    </form>

CSS

#container {
    width:375px;
    height:200px;
    margin: 10px auto;
    border: 1px solid #ff0000;
}

JavaScript

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

var layer = new Kinetic.Layer();

var imageObj = new Image();
imageObj.onload = function () {
    var yoda = new Kinetic.Image({
        x: 200,
        y: 50,
        image: imageObj,
        width: 106,
        height: 118,
        draggable: true
    });
    
    layer.add(yoda);
    layer.add(text);
    layer.add(text2);
    stage.add(layer);
};

imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg';


var text = new Kinetic.Text({
    x: 20,
    y: 30,
    text: '',
    fontSize: '30',
    fontFamily: 'Calibri',
    fill: 'black',
    draggable: true
});

var text2 = new Kinetic.Text({
    x: 100,
    y: 50,
    text: '',
    fontSize: '50',
    fontFamily: 'times',
    fill: 'green',
    draggable: true
});


document.getElementById("textBox").addEventListener("keyup", function () {
    text.setText(this.value);
    layer.draw();
}, true);
document.getElementById("textSize").addEventListener("change", function () {
    var size = this.value;
    text.fontSize(size);
    layer.draw();
}, true);




document.getElementById("textBox2").addEventListener("keyup", function () {
    text2.setText(this.value);
    layer.draw();
}, true);
    
document.getElementById("textSize").addEventListener("change", function () {
    text.sizeChanged(this.value);
    layer.draw();
}, true);

//image loader
var imageLoader = document.getElementById('imageLoader');
    imageLoader.addEventListener('change', handleImage, false);

function handleImage(e){
    var reader = new FileReader();
    reader.onload = function(event){
        var img = new Image();
        img.onload = function(){
            layer.add(new Kinetic.Image({
                x: 200,
                y: 50,
                image: img,
                width: img.width,
                height: img.height,
                draggable: true
            }));
            text.moveToTop();
           ...