JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://draw2d.org/draw2d_touch/jsdoc/draw2d/examples/code_snippets/shape/css/example.css">
<script src="http://draw2d.org/draw2d_touch/jsdoc/draw2d/lib/shifty.js"></script>
<script src="http://draw2d.org/draw2d_touch/jsdoc/draw2d/lib/raphael.js"></script>
<script src="http://draw2d.org/draw2d_touch/jsdoc/draw2d/lib/jquery-1.10.2.min.js"></script>
<script src="http://draw2d.org/draw2d_touch/jsdoc/draw2d/lib/jquery.autoresize.js"></script>
<script src="http://draw2d.org/draw2d_touch/jsdoc/draw2d/lib/jquery-touch_punch.js"></script>
<script src="http://draw2d.org/draw2d_touch/jsdoc/draw2d/lib/jquery.contextmenu.js"></script>
<script src="http://draw2d.org/draw2d_touch/jsdoc/draw2d/lib/rgbcolor.js"></script>
<script src="http://draw2d.org/draw2d_touch/jsdoc/draw2d/lib/canvg.js"></script>
<script src="http://draw2d.org/draw2d_touch/jsdoc/draw2d/lib/Class.js"></script>
<script src="http://draw2d.org/draw2d_touch/jsdoc/draw2d/lib/json2.js"></script>
<script src="http://draw2d.org/draw2d_touch/jsdoc/draw2d/lib/pathfinding-browser.min.js"></script>
<script src="http://draw2d.org/draw2d_touch/jsdoc/draw2d/src/draw2d.js"></script>
<div style="border: 1px solid #ddd; height: 100%;">
    <ul class="toolbar">
        <li><a href="javascript:void(0);" id="add" title="Add">Add</a>
        </li>
        <li><a href="javascript:void(0);" id="write" title="Write">Write</a>
        </li>
        <li><a href="javascript:void(0);" id="read" title="Read">Read</a>
        </li>
    </ul>
    <div id="container" class="boxed">
        <div onselectstart="javascript:/*IE8 hack*/return false" id="gfx_holder" style="width:100%; height:100%; "></div> <pre id="json" style="overflow:auto;position:absolute; top:10px; right:10px; width:350; height:500;background:white;border:1px solid gray">
      </pre>

    </div>
</div>

CSS

body {
    background-color: #f2f2f2;
}

JavaScript

var LabelRectangle = draw2d.shape.basic.Rectangle.extend({

    NAME: "draw2d.shape.basic.Rectangle",

    init: function (attr) {
        this._super(attr);
        this.label = new draw2d.shape.basic.Label({
            text: "Text",
            fontColor: "#0d0d0d",
            stroke: 0
        });
        this.add(this.label, new draw2d.layout.locator.CenterLocator(this));
        this.label.installEditor(new draw2d.ui.LabelInplaceEditor());
        this.createPort("hybrid", new draw2d.layout.locator.BottomLocator(this));
    },
    getPersistentAttributes: function () {
        var memento = this._super();

        memento.labels = [];

        var ports = [];
        ports = this.getPorts();

        memento.ports = [];

        console.log(ports);
        this.children.each(function (i, e) {
            console.log(e);
            memento.labels.push({
                id: e.figure.getId(),
                label: e.figure.getText(),
                locator: e.locator.NAME
            });
            ports.each(function (i, e) {
                memento.ports.push({
                    //id: e.id,
                    name: e.name,
                    locator: e.locator.NAME
                });
            });

        });

        return memento;
    },
    setPersistentAttributes: function (memento) {
        this._super(memento);

        this.resetChildren();

        $.each(memento.labels, $.proxy(function (i, e) {
            var label = new draw2d.shape.basic.Label(e.label);
            var locator = eval("new " + e.locator + "()");
            locator.setParent(this);
            this.add(label, locator);
        }, this));
    }
});


$(window).load(function () {
    var canvas = new draw2d.Canvas("gfx_holder");

    $("#add").click(function (e) { // Add a new rectangle
        var rect = new LabelRectangle({
            width: 200,
            height: 40,
            radius: 3,
            bgColor: '#ffffff',
            stroke: 0
        });
      ...