JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://jsplumbtoolkit.com/demo/js/jquery.jsPlumb-1.5.5-min.js"></script>
 <div id="main">     
               
            <div class="demo flowchart-demo" id="flowchart-demo">
                <div class="window" id="flowchartWindow1"><strong>1</strong><br/><br/></div>
                <div class="window" id="flowchartWindow2"><strong>2</strong><br/><br/></div>
                <div class="window" id="flowchartWindow3"><strong>3</strong><br/><br/></div>
                <div class="window" id="flowchartWindow4"><strong>4</strong><br/><br/></div>                     
            </div>          
            
        </div>

CSS

/** DISABLE TEXT SELECTION (SET ON BODY WHEN DRAGGING IS OCCURRING) **/
._jsPlumb_drag_select * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    user-select: none
}

/** OPEN SANS FONT **/
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
 	src:local('Open Sans'), 
 		local('OpenSans'),
 		url("font/OpenSans-Regular.ttf") format('truetype'),
 		url("font/OpenSans.woff") format('woff');
}

/** PAGE STRUCTURE **/

.dropdown { 
  display:inline;
}

.dropdown-menu>li>a {
  width:80%;
  text-transform: uppercase;
  font-size:12px;
}

/** FB **/
#like {
    position: fixed;
    width: 77px;
    height: 70px;
    border: 0;
    right: 11px;
    bottom: -40px;
}

#retweet_button {
  position: fixed;
  bottom: 30px;
  right: -7px;
}

body {
    padding:0;
    margin:0;    
    font-family:'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;    
    background-color:#eaedef;
   
}

#headerWrapper {
	width:100%;
	background-color:white;
	position:fixed;
	top:0;left:0;
  z-index:100001;
	height:44px;
  padding:0;
  opacity:0.8;
}

#header {
	margin-top:0;
  height:44px;
  font-size:13px;
	margin-left:auto;
	margin-right:auto;    
  padding-right: 50px;
  padding-left: 50px;
}

.logo {  
  font-size:30px;
  color:#1f1f1f;
  text-shadow: 1px 1px #ccc;
  float:left;
  /*background-image:url(logo-export-35h.png);
  background-repeat:no-repeat;    */
  width:154px;
  height:44px;
  background-position:0px 5px;
}

 #main {    
  font-size: 80%;    
  width:100%;
  margin-left:auto;
  margin-right: auto;  
  height:800px;
  text-align: center;
  position: relative;
}

.demo {
  position: relative;
  width:100%;
  background-color:white;    
  height:100%;
  overflow:auto;
}

.explanation {
  position: absolute;
  text-align: center;
  background-color: #7AB02C;
  opacity: 0.8;
  filter: alpha(opacity=80);
  color: white;
  width:...

JavaScript

jsPlumb.ready(function() {

		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 } ],
				[ "Label", { 
					location:0.1,
					id:"label",
					cssClass:"aLabel"
				}]
			],
			Container:"flowchart-demo"
		});		

		// this is the paint style for the connecting lines..
		var connectorPaintStyle = {
			lineWidth:4,
			strokeStyle:"#61B7CF",
			joinstyle:"round",
			outlineColor:"white",
			outlineWidth:2
		},
		// .. and this is the hover style. 
		connectorHoverStyle = {
			lineWidth:4,
			strokeStyle:"#216477",
			outlineWidth:2,
			outlineColor:"white"
		},
		endpointHoverStyle = {
			fillStyle:"#216477",
			strokeStyle:"#216477"
		},
		// the definition of source endpoints (the small blue ones)
		sourceEndpoint = {
			endpoint:"Dot",
			paintStyle:{ 
				strokeStyle:"#7AB02C",
				fillStyle:"transparent",
				radius:7,
				lineWidth:3 
			},	
            cssClass: "cssClass",
            hoverClass: "hoverClass",
			isSource:true,
			connector:[ "Flowchart", { stub:[40, 60], gap:10, cornerRadius:5, 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) 
		targetEndpoint = {
			endpoint:"Dot",					
			paintStyle:{ fillStyle:"#7AB02C",radius:11...