JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://snap.berkeley.edu/snapsource/morphic.js"></script>
<script src="http://snap.berkeley.edu/snapsource/widgets.js"></script>
<script src="http://snap.berkeley.edu/snapsource/blocks.js"></script>
<canvas></canvas>

CSS

body {
    margin: 0;
    background: rgb(80%, 80%, 80%);
}
canvas {
    position: absolute;
}

JavaScript

StringFieldMorph.prototype.init = function (defaultContents, minWidth, fontSize, fontStyle, bold, italic, isNumeric) {
    var t = this;
    
    t.minWidth = minWidth;
    t.fontSize = fontSize;
    t.fontStyle = fontStyle;
    t.isBold = bold;
    t.isItalic = italic;
    t.isNumeric = isNumeric || false;

    var i = t.input = document.createElement('input');
    i.style.position = 'absolute';
    i.style.border = i.style.padding = i.style.margin = i.style.outline = 0;
    i.style.background = 'transparent';
    i.style.font = StringMorph.prototype.font.call(this);
    i.style.left = t.left() + 'px';
    i.style.top = t.top() + 'px';
    t.updateExtent();
    i.value = defaultContents || '';
    i.addEventListener('input', function () {
        if (t.onInput) t.onInput(i.value);
    });
    document.body.appendChild(i);

    StringFieldMorph.uber.init.call(this);
    t.color = new Color(255, 255, 255);
    t.acceptsDrops = false;
    t.drawNew();
    
    t.text = {
        toggleIsPassword: function () {
            t.isPassword = !t.isPassword;
            t.updateType();
        }
    };
};

StringFieldMorph.prototype.updateExtent = function () {
    this.input.style.height = this.height() + 'px';
    this.input.style.width = this.width() + 'px';
};

StringFieldMorph.prototype.updateType = function () {
    this.input.type = this.isPassword ? 'password' : 'text';
};

StringFieldMorph.prototype.drawNew = function () {
    this.updateType();
    this.silentSetExtent(new Point(Math.max(this.width(), this.minWidth), fontHeight(this.fontSize)));
    this.updateExtent();
    StringFieldMorph.uber.drawNew.call(this);
};

StringFieldMorph.prototype.moveBy = function (delta) {
    this.changed();
    this.bounds = this.bounds.translateBy(delta);
    this.children.forEach(function (child) {
        child.moveBy(delta);
    });
    this.changed();
    this.input.style.left = this.bounds.origin.x + 'px';
    this.input.style.top = this.bounds.origin.y +...