JSFiddle - React, Tailwind, and code Playground

by sporritt

HTML

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
                <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
            <script type="text/javascript" src="http://jsplumb.googlecode.com/files/jquery.jsPlumb-1.3.13-all-min.js"></script>
</head>
<body>
<div id='asd'>Lorem ipsum <span id='first'>whatever</span> random text and then <span id='second'> following stuff</span></div>

</body>
</html>

CSS

#asd{position:relative;z-index:9999;}
#first,#second {z-index:2;position:absolute;}
._jsPlumb_endpoint, ._jsPlumb_connector, ._jsPlumb_overlay {
    z-index:1
}

JavaScript

$(document).ready(function() {
var endpointOptions = { isSource:true, isTarget:true, endpoint:"Dot", paintStyle:{ fillStyle:"#F39814",radius:7 }, enabled:false }; 
var div1Endpoint = jsPlumb.addEndpoint('first', { anchor:"AutoDefault" }, endpointOptions ); 
var div2Endpoint = jsPlumb.addEndpoint('second', { anchor:"AutoDefault" }, endpointOptions );  
jsPlumb.importDefaults({ConnectorZIndex:1});
jsPlumb.connect({ 
                    source:div1Endpoint,
                                        target:div2Endpoint,
                                                            connector:[ "Flowchart", { stub:[40, 60], gap:10 } ],
                                                                                paintStyle:{ lineWidth:4, strokeStyle:'#F39814' }
});

});