JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://jsplumb.googlecode.com/files/jquery.jsPlumb-1.3.7-all.js"></script>
<div id="canvas">
            <div class="window" id="window1">window1</div>
            <div class="window" id="window2">window2</div>
            <div class="window" id="window3">window3</div>
            <div class="window" id="window4">window4</div>
            <div class="window" id="window5">window5</div>
            <div class="window" id="window6">window6</div>
</div>

CSS

body { 
    background-color: white; 
    font-size: 90%;
    background-image: url(../images/dynamicAnchorBg.jpg); 
    font-family: Helvetica;
}

#canvas {
    width: 80%;
    height: 800px;
    margin-left: 20px;
    margin-top: 20px;
    position: relative;
}


.window { 
    border:0.1em dotted #d4e06b; 
    opacity:0.8; 
    filter:alpha(opacity=80); 
    width:12em; height:2em; 
    z-index:20; 
    position:absolute; 
    color:black;
    font-family:helvetica, sans;
    padding-top:0.9em; 
    font-size:0.9em;
    text-align:center;
    background-color:white;
}

.window { 
    cursor: pointer;
    box-shadow: 2px 2px 19px #aaa;
   -o-box-shadow: 2px 2px 19px #aaa;
   -webkit-box-shadow: 2px 2px 19px #aaa;
   -moz-box-shadow: 2px 2px 19px #aaa;
}

#window1 { left:20em;}
#window2 { left:10em;top:12em;}
#window3 { left:40em;top:12em;}
#window4 { left:4em;top:24em;}
#window5 { left:22em;top:24em;}
#window6 { left:47em;top:24em;}
#window7 { top:18em;left:40em;}
#window8 { left:63em;top:32em;}

path, ._jsPlumb_endpoint { cursor: pointer; }
._jsPlumb_connector { z-index:4; }
._jsPlumb_connector:hover { z-index:99; }

._jsPlumb_endpoint { z-index:5; }
._jsPlumb_overlay { z-index:6; }

JavaScript

jsPlumb.bind("ready", function() {

    // chrome fix.
    document.onselectstart = function () { return false; };    
    
    var DefaultEdgeColor = "#000000";
    var DefaultEdgeWidth = 3;
    var hoverEdgeColor = "#EC981A";
    var DefaultAnchor1 = "BottomCenter";
    var DefaultAnchor2 = "TopCenter";
        
    jsPlumb.Defaults.Connector = [ "Flowchart", { stub: 40 } ];
    jsPlumb.Defaults.DragOptions = { cursor: "pointer", zIndex:2000 };
    jsPlumb.Defaults.PaintStyle = { strokeStyle: DefaultEdgeColor, lineWidth: DefaultEdgeWidth, joinstyle: "round" };
    jsPlumb.Defaults.HoverPaintStyle = { strokeStyle: hoverEdgeColor };
    jsPlumb.Defaults.RenderMode = "svg";
    
    var sourceEndpoint = {
        endpoint: "Blank",
        isSource: true
    };
    
    var targetEndpoint = {
        endpoint: ["Image", { url: "http://www.napkee.com/napkee/features/exports/icons/icons/napkee/DownTriangleIcon.png"}],                    
        maxConnections: -1,
        isTarget: true,
    };

    var targetLoopEndpoint = {
        endpoint: ["Image", { url: "http://www.napkee.com/napkee/features/exports/icons/icons/napkee/DownTriangleIcon.png"}],                    
        maxConnections: -1,
        isTarget: true
    };    
    
    var allSourceEndpoints = [], allTargetEndpoints = [];
    addEndpoints = function(src, target) {
        if(src.toString() != target.toString()) {
            allSourceEndpoints.push(jsPlumb.addEndpoint(src, {anchor: DefaultAnchor1}, sourceEndpoint));
            allTargetEndpoints.push(jsPlumb.addEndpoint(target, {anchor: DefaultAnchor2}, targetEndpoint));
        }else{
            allSourceEndpoints.push(jsPlumb.addEndpoint(src, {anchor: "RightMiddle"}, sourceEndpoint));
            allTargetEndpoints.push(jsPlumb.addEndpoint(target, { anchor: "TopCenter" }, targetLoopEndpoint));
        }
    }
    
    addEndpoints("window1", "window2");
    addEndpoints("window1", "window3");
    addEndpoints("window2", "window4");
   ...