JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://www.itscomply.com/isomorphic10/system/modules/ISC_Core.js"></script>
<script src="https://www.itscomply.com/isomorphic10/system/modules/ISC_History.js"></script>
<script src="https://www.itscomply.com/isomorphic10/system/modules/ISC_Foundation.js"></script>
<script src="https://www.itscomply.com/isomorphic10/system/modules/ISC_Containers.js"></script>
<script src="https://www.itscomply.com/isomorphic10/system/modules/ISC_Grids.js"></script>
<script src="https://www.itscomply.com/isomorphic10/system/modules/ISC_Forms.js"></script>
<script src="https://www.itscomply.com/isomorphic10/system/modules/ISC_Drawing.js"></script>
<script src="https://www.itscomply.com/isomorphic10/system/modules/ISC_DataBinding.js"></script>

JavaScript

isc.defineClass("SignatureBox", "DrawPane").addProperties({
	    width: "100%",
	    height: "100%",
	    backgroundColor: "white",
	    segments: [],
	    segmentIndex: 0,
	    erase: function(){
	        this.segments = [];
	        this.segmentIndex = 0;
	        this.Super("erase", arguments);
	    },
	    undo: function () {
	        if (this.segments.length > 0) {
	            var segment = this.segments[this.segments.length - 1];
	            for (var i = 0; i < segment.length; i++) {
	                segment[i].erase();
	            }
	            this.segments.splice(-1, 1);
	            this.segmentIndex--;
	        }
	    },
	    mouseMove: function () {
	        if (this.shouldDraw) {
	            this.currentSegment.setEndPoint(isc.Event.getX() - this.getPageLeft(), isc.Event.getY() - this.getPageTop());
	            this.segments[this.segmentIndex].push(this.currentSegment);
	            this.currentSegment = isc.DrawLine.create({
	                drawPane: this,
	                autoDraw: true,
	                lineColor: "black",
	                lineWidth: 3,
	                startLeft: isc.Event.getX() - this.getPageLeft(),
	                startTop: isc.Event.getY() - this.getPageTop(),
	                endLeft: isc.Event.getX() - this.getPageLeft(),
	                endTop: isc.Event.getY() - this.getPageTop()
	            });
	        }
	    },
	    mouseDown: function () {
	        this.startDrawing();
	    },
	    mouseOut: function () {
	        if (this.shouldDraw && !this.contains(isc.EventHandler.getTarget(), true)) {
	            this.stopDrawing();
	        }
	    },
	    mouseOver: function () {
	        if (!this.shouldDraw && isc.Event.mouseIsDown()) {
	            this.startDrawing();
	        }
	    },
	    mouseUp: function () {
	        this.stopDrawing();
	    },
	    startDrawing: function () {
	        this.shouldDraw = true;

	        this.segments.push([]);

	        this.currentSegment = isc.DrawLine.create({
	           ...