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;
}
.DCon {
	background: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTk2D-dANCTuefhUI8C9Q3krWq5-J0tZpeSPY65Qc6bUuZLz1Uj);
	background-size: 100% 100%;
    cursor:pointer;
	background-repeat: no-repeat;
	height: 15px;
	width: 15px;
}

JavaScript

// JSPLUMB REMOVE LABEL FOR CONNECTION
// init draggable and resizable on elements
$(document).ready(function(){
    jsPlumb.importDefaults({
	PaintStyle : {lineWidth:1,strokeStyle:"gray"},
	Connector: ["Straight"],
	Anchor:"Continuous",
	ConnectionOverlays: [ 	["Label", {
		cssClass:"component",
		label : "<div class='DCon'><div>",
		location:0.4,
		id:"label",
		events:{
			"click": function(label, evt) {
jsPlumb.detach(label.component);
			},
			"mouseenter": function(label, evt) {				      label.component.setPaintStyle({lineWidth:1,strokeStyle:"#FF0040"});
			},
			"mouseexit": function(label, evt) {
label.component.setPaintStyle({lineWidth:1,strokeStyle:"gray"});
			}
		}
	}],
	[ "Arrow", { location:0.45, id:"arrow", length:7, width:7} ]
	],
	ConnectionsDetachable: false,
});
    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.Defaults.Container = "whiteboard";


var exampleDropOptions = {
        activeClass:"dragActive"
        };        

var exampleGreyEndpointOptions = {
    endpoint:"Rectangle",
    paintStyle:{ width:25, height:21, fillStyle: color },
   ...