JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://morrisonpitt.com/jsPlumbTest/js/1.3.4/jquery.jsPlumb-1.3.4-RC1-all.js"></script>
<div id="demo">
            <div class="window" id="window1"><strong>1</strong></div>
            <div class="window" id="window2"><strong>2</strong></div>
            <div class="window" id="window3"><strong>3</strong></div>
            <div class="window" id="window4"><strong>4</strong></div>
        </div>

CSS

.window { border:1px solid #ffffff;
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;
-moz-border-radius:0.5em;
border-radius:0.5em;
opacity:0.8;
filter:alpha(opacity=80);
width:5em; height:5em;
line-height:5em;
text-align:center;
z-index:20; position:absolute;
background-color:#eeeeef;
color:black;
font-family:helvetica;padding:0.5em;
font-size:0.9em;}
.window:hover {

box-shadow: 2px 2px 19px #444;
   -o-box-shadow: 2px 2px 19px #444;
   -webkit-box-shadow: 2px 2px 19px #444;
   -moz-box-shadow: 2px 2px 19px #444;
    opacity:0.6;
filter:alpha(opacity=60);

}

.active {
    border:1px dotted green;
}
.hover {
    border:1px dotted red;
}

#window1 { top:14em;left:2em;}
#window2 { top:15em; left:63em;}
#window3 { top:37em;left:38em; }
#window4 { top:5em; left:28em;}
._jsPlumb_connector { z-index:4; }
._jsPlumb_endpoint { z-index:21;cursor:pointer; }
.hl { border:3px solid red; }
#debug { position:absolute; background-color:black; color:red; z-index:5000 }

.aLabel {
     background-color:white; 
    padding:0.4em; 
    font:12px sans-serif; 
    color:#444;
    z-index:21;
    border:1px dotted gray;
    opacity:0.8;
    filter:alpha(opacity=80);
}

#demo {
    overflow:scroll;
    position:relative;
    width:200em;
    height:200em;
    margin-top:2em;
    margin-left:2em;
    background-color:red;
}

JavaScript

$(document).ready(function() {
// default drag options
            jsPlumb.Defaults.DragOptions = { cursor: 'pointer', zIndex:2000 };
            // default to blue at one end and green at the other
            jsPlumb.Defaults.EndpointStyles = [{ fillStyle:'#225588' }, { fillStyle:'#558822' }];
            // blue endpoints 7 px; green endpoints 11.
            jsPlumb.Defaults.Endpoints = [ [ "Dot", {radius:7} ], [ "Dot", { radius:11 } ]];
            // enable mouse events
            jsPlumb.setMouseEventsEnabled(true);     

    jsPlumb.setDraggableByDefault(true);
            // the overlays to decorate each connection with.  note that the label overlay uses a function to generate the label text; in this
            // case it returns the 'labelText' member that we set on each connection in the 'init' method below.
            jsPlumb.Defaults.Overlays = [
                [ "Arrow", { location:0.9 } ], 
                [ "Label", { 
                    location:0.1,
                    label:function(label) {
                        return label.connection.labelText || ""; 
                    },
                    cssClass:"aLabel"
                }] 
            ];

            // this is the paint style for the connecting lines..
            var connectorPaintStyle = {
                lineWidth:5,
                strokeStyle:"#deea18",
                joinstyle:"round"
            },
            // .. and this is the hover style. 
            connectorHoverStyle = {
                lineWidth:7,
                strokeStyle:"#ffffff"
            },
            // the definition of source endpoints (the small blue ones)
            sourceEndpoint = {
                endpoint:"Dot",
                paintStyle:{ fillStyle:"#225588",radius:7 },
                isSource:true,
                connector:[ "Flowchart", { stub:40 } ],
                connectorStyle:connectorPaintStyle,
                hoverPaintStyle:connectorHoverStyle,
               ...