JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jsPlumb/1.4.1/jquery.jsPlumb-1.4.1-all-min.js"></script>
<div id="whiteboard">
    <div id="startnode">Start</div>
    <div id="container0" class="stepnode">0
    </div>
    <div id="container1" class="stepnode">1
    </div>
    <div id="container2" class="stepnode">2
    </div>
    <div id="container3" class="stepnode">3
    </div>
</div>

CSS

.stepnode {
    border:1px solid black;
    position:absolute !important;
    width:5em;
    height:5em;
    padding: 0.5em;
    z-index:1;
    border-radius:0.5em;
    box-shadow: 2px 2px 19px #aaa;
    background: white;
}

#container0 { top:8em; left:2em;}
#container1 { top:8em; left:15em;}
#container2 { top:25em; left:2em;}
#container3 { top:25em; left:15em;}

.dragActive {
    border: 2px dotted orange;
}

#whitboard {
    position: relative;
}

#startnode {
    /*margin: 0px auto;*/
    top: 1em;
    left: 10em;
    position: absolute !important;
    width: 6em;
    height: 3em;
    border: 1px solid black;
    border-radius:0.5em;
    box-shadow: 2px 2px 19px #aaa;
    background: white;
    text-align: center;
    font-weight: bold;
}

JavaScript

// JSPLUMB PROGRAMATIC CONNECTIONS
// init draggable and resizable on elements
$(document).ready(function(){
    Repaint();
});

//// functions ////

// repaint
    function Repaint(){
        $("#whiteboard").resize(function(){
            jsPlumb.repaintEverything();
        });
    }
// resize
    function ResizeEl(el){
        $(el).resizable();
    }
// drag
    function DragEl(el){
        jsPlumb.draggable($(el));
    }
// Init element
function InitContainer(el) {
    jsPlumb.addEndpoint(el, {
        uuid:el.attr("id")+"sr",
        //anchor: "BottomCenter"
    }, exampleGreyEndpointOptions);
    
    jsPlumb.addEndpoint(el, {
        uuid:el.attr("id")+"tr",
        //anchor: "TopCenter"
    }, endpointOptions);
    ResizeEl(el);
    DragEl(el);
}
// Init startnode
function InitStartnode(){
    jsPlumb.addEndpoint('startnode', {
        //anchor: "BottomCenter"
    }, exampleGreyEndpointOptions);
    // not resizable or draggable
}

// JsPlumb Config
var color = "gray",
    arrowCommon = { foldback:0.7, fillStyle:color, width:14 };

jsPlumb.importDefaults({
    Connector : [ "Bezier", { curviness:50 } ],
    Overlays: [
        [ "Arrow", { location:0.7 }, arrowCommon ],
    ]
});
jsPlumb.Defaults.Container = "whiteboard";


var exampleDropOptions = {
        activeClass:"dragActive"
        };        

var exampleGreyEndpointOptions = {
    endpoint:"Rectangle",
    paintStyle:{ width:25, height:21, fillStyle: color },
    isSource:true,
    isTarget:false,
    connectorStyle : { strokeStyle: color },
    maxConnections:5,
    anchor: "BottomCenter"
};

var endpointOptions = {
    isTarget:true, 
    endpoint:"Dot", 
    paintStyle:{ 
        fillStyle: color
    },
        dropOptions: exampleDropOptions,
        maxConnections:5,
        anchor: "TopCenter"
};
var common = {
    anchors: ["BottomCenter", "TopCenter"],
    /*endpoints: [{
        isSource: true,
        isTarget: false,
       //anchor: "BottomCenter"
    }, {
        isSource: false,
...