JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.21/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsPlumb/2.0.7/jsPlumb.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<div class="demo">
<div id="tabs" style="height:200px;border:solid 1px red">
    <ul>
        <li><a href="#tabs-1">Tab 1</a></li>
        <li><a href="#tabs-2">Tab 2</a></li>
        <li><a href="#tabs-3">Tab 3</a></li>
    </ul>
    <div id="tabs-1">
        <div id="e1" class="nodes">
        </div>
        <div id="e2" class="nodes">
        </div>
    </div>
    <div id="tabs-2">
        <div id="e3" class="nodes">
        </div>
        <div id="e4" class="nodes">
        </div>
    </div>
    <div id="tabs-3">
        <div id="e5" class="nodes" >
        </div>
        <div id="e6" class="nodes" >
        </div>
    </div>
</div>

</div><!-- End demo -->

CSS

.nodes
{
            width:40px; 
            height:40px;
            border:solid 1px; 
            margin-right:50px;
            float:left;
}

JavaScript

$("document").ready(function(){
        $("#tabs" ).tabs({
   show: function(event, ui) { jsPlumb.repaintEverything(); }
});//load the jquery-ui tabs
                               
        jsPlumb.Defaults.Connector = [ "Flowchart", { stub:10, gap:0 } ];                                    
        jsPlumb.Defaults.EndpointStyle = { radius:2, fillStyle:"gray" };
        jsPlumb.Defaults.PaintStyle = { strokeStyle:"gray", lineWidth:2 };
        jsPlumb.Defaults.Anchors =  [ "RightMiddle", "LeftMiddle" ];            
        jsPlumb.connect({source:"e1",target:"e2",anchor:"Continuous"});
        jsPlumb.connect({source:"e3",target:"e4",anchor:"Continuous"});
        jsPlumb.connect({source:"e5",target:"e6",anchor:"Continuous"});
                                          
    });

Run