JSFiddle - React, Tailwind, and code Playground

by sporritt

HTML

<script src="http://jsplumb.org/js/1.3.4/jquery.jsPlumb-1.3.4-all.js"></script>
<div class="window" id="window1"><strong>1</strong><div class="ep"></div></div>
<div class="window" id="window2"><strong>2</strong><div class="ep"></div></div>
<div class="window" id="window3"><strong>3</strong><div class="ep"></div></div>
<div class="window" id="window4"><strong>4</strong><div class="ep"></div></div>

CSS

.window { border:1px solid #346789;
    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;
 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);

}

#window1 { top:5em;left:0em;}
#window2 { top:7em; left:25em;}
#window3 { top:20em;left:8em; }
#window4 { top:20em; left:28em;}
._jsPlumb_connector { z-index:4; }
._jsPlumb_endpoint { z-index:21;cursor:pointer;}
.ep {
        float:right;
        width:1em;
        height:1em;
        background-color:#994466;
        cursor:pointer;
}

JavaScript

$(document).ready(function() {

            // 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:"#2e2aF8"
            },
            // the definition of source endpoints (the small blue ones)
            sourceEndpoint = {
                endpoint:"Dot",
                paintStyle:{ fillStyle:"#225588",radius:7 },
                isSource:true,
                isTarget:true,
                maxConnections:1,
                connector:[ "Flowchart", { stub:40 } ],
                connectorStyle:connectorPaintStyle,
                hoverPaintStyle:connectorHoverStyle,
                connectorHoverStyle:connectorHoverStyle,
                anchor:"BottomCenter"
            },

            targetEndpoint = {
                endpoint:"Dot",                    
                paintStyle:{ fillStyle:"#558822",radius:11 },
                hoverPaintStyle:connectorHoverStyle,
                maxConnections:1,
                isTarget:true,
                dropOptions:{ hoverClass:"hover", activeClass:"active" },
                anchor:[ "LeftMiddle", "RightMiddle" ]
            },
            init = function(connection) {
                connection.labelText = connection.sourceId.substring(6) + "-" + connection.targetId.substring(6);
            };


            var sourceEndpoints = jsPlumb.addEndpoint($(".window"), sourceEndpoint);
            
            jsPlumb.bind("jsPlumbConnection", function(connInfo) { 
                init(connInfo.connection);
            });
                                
            jsPlumb.makeSource($(".window"), {
                
                endpoint: sourceEndpoint
            });
            jsPlumb.makeTarget($(".window"), {
      ...