JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://draw2d.org/draw2d_touch/jsdoc_5/draw2d/examples/code_snippets/shape/css/example.css">
<script src="http://draw2d.org/draw2d_touch/jsdoc_5/draw2d/lib/shifty.js"></script>
<script src="http://draw2d.org/draw2d_touch/jsdoc_5/draw2d/lib/jquery-1.10.2.min.js"></script>
<script src="http://draw2d.org/draw2d_touch/jsdoc_5/draw2d/lib/jquery.autoresize.js"></script>
<script src="http://draw2d.org/draw2d_touch/jsdoc_5/draw2d/lib/jquery.contextmenu.js "></script>
<script src="http://draw2d.org/draw2d_touch/jsdoc_5/draw2d/lib/rgbcolor.js"></script>
<script src="http://draw2d.org/draw2d_touch/jsdoc_5/draw2d/lib/canvg.js"></script>
<script src="http://draw2d.org/draw2d_touch/jsdoc_5/draw2d/lib/Class.js "></script>
<script src="http://draw2d.org/draw2d_touch/jsdoc_5/draw2d/lib/json2.js "></script>
<script src="http://draw2d.org/draw2d_touch/jsdoc_5/draw2d/lib/pathfinding-browser.min.js"></script>
<script src="http://draw2d.org/draw2d_touch/jsdoc_5/draw2d/lib/raphael.js"></script>
<script src="http://draw2d.org/draw2d_touch/jsdoc_5/draw2d/src/draw2d.js"></script>
<div onselectstart="javascript:/*IE8 hack*/return false" id="gfx_holder" style="width:1500px; height:1500px;-webkit-tap-highlight-color: rgba(0,0,0,0);"></div>

JavaScript

var LabeldComplexFigure = draw2d.SetFigure.extend({

    init : function(attr)
    {
        this._super(attr);
        
        this.strokeScale = false; // scale the stroke width of the children nodes if the parent resize. available with version 5.1.0 of draw2d
        this.setKeepAspectRatio(true);
    },
    

    /** 
     * @template
     **/
    createSet : function()
    {
        this.canvas.paper.setStart();
        
      var halfW = this.getWidth()/2;
      var halfH = this.getHeight()/2;
      
      this.canvas.paper.rect(0,0, this.getWidth(),this.getHeight()).attr({"fill":"#f9f9f9"});
      this.canvas.paper.ellipse(halfW, halfH, halfW/2,halfH/2).attr({"fill":"#ff0000"});
      this.canvas.paper.text(0, 7                 , "Text").attr({"text-anchor":"start"});
      this.canvas.paper.text(0, this.getHeight()-7, "Text2").attr({"text-anchor":"start"});
      
      return this.canvas.paper.setFinish();
    },
});

$(function () {

        var canvas = new draw2d.Canvas("gfx_holder");
       var x = 20, y=20;
        addArrowToConnection();
        //injectSetPosition();
   
        for(var i = 1; i<=64; i++)
        {
            addRec(canvas, i,x,y);
            
            if(i/8 == Math.floor(i/8))
            {
                y = y + 80;
                x = 20;
            }
            else
                x = x + 80;
        }
    });


function addRec(canvas, seq,x,y)
{
    var rec = new LabeldComplexFigure({width:50,height:50});
        rec.setStroke(1);
        rec.setBackgroundColor("#d3d3d3");
    rec.port = rec.createPort("hybrid", new draw2d.layout.locator.BottomLocator(rec));
        rec.port.setConnectionAnchor(new draw2d.layout.anchor.FanConnectionAnchor(rec.port,30));

rec.installEditPolicy(new draw2d.policy.figure.AntSelectionFeedbackPolicy());
canvas.add( rec, x,y); 
}

function addArrowToConnection()
{
    draw2d.Connection.createConnection = function(sourcePort, targetPort, callback, dropTarget){
	var con = new...