JSFiddle - React, Tailwind, and code Playground

by Sky Sigal

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jsPlumb/1.4.1/jquery.jsPlumb-1.4.1-all-min.js"></script>
<div style="relative">
  <div class="workflow-container" id='stateDiagram'>
    <div id="state1" class="item"></div>
    <div id="state2" class="item"></div>
    <div id="state3" class="item"></div>
    <div id="state4" class="item"></div>
  </div>
</div>

CSS

.workflow-container {
  padding:0;
  position:relative;
  border: 1px solid black;
  background:#F0F0FF;
  width:400px;
  height:400px;
}


.workflow-container .item { 
    position:absolute;
    width: 40px;
    height: 40px;
    z-index:20; 
    border:1px solid #A0A0FF;
    box-shadow: 2px 2px 10px #aaa;
    -o-box-shadow: 2px 2px 10px #aaa;
    -webkit-box-shadow: 2px 2px 10px #aaa;
    -moz-box-shadow: 2px 2px 10px #aaa;
    border-radius:0.25em;
    -moz-border-radius:0.5em;
    opacity:0.8;
    filter:alpha(opacity=80);
    background-color:#FeFeFF;
    padding:0.5em;
    text-align:center;
    color:black;
    font-size:0.9em;
}

.workflow-container .item:hover {
    box-shadow: 2px 2px 10px #444;
    -o-box-shadow: 2px 2px 10px #444;
    -webkit-box-shadow: 2px 2px 10px #444;
    -moz-box-shadow: 2px 2px 10px #444;
    opacity:0.6;
    filter:alpha(opacity=60);
}

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


.workflow-container ._jsPlumb_connector { 
    z-index:4; 
}

.workflow-container 
._jsPlumb_endpoint, 
.endpointTargetLabel, 
.endpointSourceLabel 
{ 
  z-index:21;cursor:pointer; 
}

.workflow-container .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);
	cursor: pointer;
}
.workflow-container .aLabel._jsPlumb_hover {
	padding:0.4em; 
	font:12px sans-serif; 
	z-index:21;
	opacity:0.8;
	filter:alpha(opacity=80);
	cursor: pointer;

	background-color:#5C96BC;
	color:white;	
	border:1px solid white;
}


      
#state1 {
  left: 40px;
  top: 40px;
  background:orange;
}
      
#state2 {
  left: 260px;
  top: 40px;
}
      
#state3 {
  left: 40px;
  top: 260px;
}

#state4 {
  left: 260px;
  top: 260px;
}

JavaScript

jsPlumb.ready(function() {
  
    var prefix = "";
	
	var instance = jsPlumb.getInstance({
      // default drag options
      DragOptions : { cursor: 'pointer', zIndex:2000 },
      // 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.
      ConnectionOverlays : [
          [ "Arrow", { location:1, size:5 } ],
        [ "Label", { location:0.1, id:"label", cssClass:"aLabel"}]
      ],
      Container:"stateDiagram"
    });    


       // this is the paint style for the connecting lines:
    var connectorPaintStyle = {
      lineWidth: 2,
      strokeStyle: "#61B7CF",
      joinstyle: "round",
      outlineColor: "white",
      outlineWidth: 1
    };
	
    // .. and this is the hover style. 
    var connectorHoverStyle = {
      lineWidth:2,
      strokeStyle:"#216477",
      outlineColor:"white",
      outlineWidth:1
    };
	
    var endpointHoverStyle = {
      fillStyle:"#216477",
      strokeStyle:"#216477"
    };
	
    // the definition of source endpoints (the small blue ones)
    var sourceEndpoint = {
      endpoint:"Dot",
      paintStyle:{ 
        strokeStyle:"#A0A0FF",
        fillStyle:"transparent",
        radius: 6,
        lineWidth:1 
      },
      isSource: true,
      connector: [
          "Flowchart", 
          { stub:[40, 60], gap:10, cornerRadius:2, alwaysRespectStubs:true } ],
      connectorStyle:connectorPaintStyle,
      hoverPaintStyle:endpointHoverStyle,
      connectorHoverStyle:connectorHoverStyle,
      dragOptions: {},
      overlays: [
        [ "Label", { 
                    location:[0.5, 1.5], 
                    label:"Drag",
                    cssClass:"endpointSourceLabel" 
                   } ]
      ]
    };
    
    // the definition of target endpoints (will
    //appear when the user drags a connection) 
    var...