JSFiddle - React, Tailwind, and code Playground

by taoist

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css">
<script src="https://jsplumb.googlecode.com/files/jquery.jsPlumb-1.3.16-all-min.js"></script>
    <div>
        <div id="a" class="a sourceWindow window" style="width: auto;height: auto;border: solid 1px">       	
        	<b>SOURCE</b>       	 	
            <input id="sourceValueSpinner" name="value" />              
        </div>

        <div id="b" class="window" style="width: 150px;height: 150px;border: solid 1px;">
        	<b>TARGET</b>
             <div id="zz" class="bWindow">
                 <div id="targetSlider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"></div>
            </div>
            <b>TARGET 2 </b>
             <div id="xx" class="cWindow" style="width: auto;height: auto;">
                 <div id="targetSliderTwo" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"></div>
            </div>
        </div>
        <ul id="log"></ul>
  </div>

CSS

.window {
			    background-color: white;
			    border: 3px solid #346789;
			    color: black;
			    font-family: helvetica;
			    font-size: 0.8em;
			    height: 12em;
			    opacity: 0.8;
			    padding: 0.5em;
			    position: absolute;
			    width: 14em;
			    /*z-index: 20;*/
			    text-align:center;
			}

.dragActive {
			    border: 5px solid #346789;
}

.bWindow {
    width: auto;
    height:50px;
}
.cWindow {
    width: auto;
    height:50px;
}

#log { clear: both; }

JavaScript

$(document).ready(function() {
    jsPlumb.importDefaults({
            Container:$("body")
    });
    
    $('#sourceValueSpinner').spinner({
                min: 0,
                max: 10000,
                step: 1
    });

    $("#targetSlider").slider({
                min: 0,
                max: 1000,
                step: 1
    });                    

    $("#targetSliderTwo").slider({
            min: 0,
            max: 1000,
            step: 1
    });   
 
    var a = $("#a");
    var b = $("#b");
    var log = $("#log");
    
    //Setting up drop options
    var targetDropOptions = {
            tolerance:'touch',
            hoverClass:'dropHover',
            activeClass:'dragActive'
    };
    
    //Setting up a Target endPoint
    var targetColor = "#316b31";

    var targetEndpoint = {
       endpoint:["Dot", { radius:12 }],
       paintStyle:{ fillStyle:targetColor},
       //isSource:true,
       scope:"test",
       connectorStyle:{ strokeStyle:targetColor, lineWidth:12 },
       connector: ["Bezier", { curviness:63 } ],
       maxConnections:3,
       isTarget:true,
       dropOptions : targetDropOptions

    };

    var targetColorTwo = "#456781";

    var targetEndpointTwo = {
       endpoint:["Dot", { radius:12 }],
       paintStyle:{ fillStyle:targetColorTwo},
       //isSource:true,
       scope:"test",
       connectorStyle:{ strokeStyle:targetColor, lineWidth:12 },
       connector: ["Bezier", { curviness:63 } ],
       maxConnections:3,
       isTarget:true,
       dropOptions : targetDropOptions

    };
    
    //Setting up a Source endPoint
    var sourceColor = "#DAA520";

    var sourceEndpoint = {
       endpoint:["Dot", { radius:12 }],
       paintStyle:{ fillStyle:sourceColor},
       isSource:true,
       scope:"test",
       connectorStyle:{ strokeStyle:sourceColor, lineWidth:12 },
       connector: ["Bezier", { curviness:63 } ],
       maxConnections:3

    };
    
    jsPlumb.addEndpoint($(".sourceWindow") , {...