JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://morrisonpitt.com/jquery.jsPlumb-1.3.3-all.js"></script>
<div id="container">
    <div id="view">
        <div id="a">
            <span>A</span>
        </div>
        
        <div id="b">
            <span>B</span>
        </div>
    </div>
</div>

CSS

div#container {
    position: relative;
    height: 20em;
    width: 30em;
    overflow: auto;
}

div#view {
    background-color: #eee;
    height: 40em;
    width: 30em;
}

div {
    background-color: #ccc;
    position: absolute;
    height: 4em;
    width: 4em;
}

#a {
    top: 8em;
    left: 10em;
    z-index: 2;
}

#b {
    top: 10em;
    left: 20em;
    z-index: 2;
}

JavaScript

jsPlumb.Defaults.EndpointStyle = { fillStyle: 'rgba(0,0,0,.5)' };
jsPlumb.Defaults.Container = $('#view');

var a = $('#a');
var b = $('#b');

jsPlumb.addEndpoint( a, { uuid: 'a-source', dynamicAnchors: [ 'LeftMiddle' ] } );
jsPlumb.addEndpoint( b,{ uuid: 'b-target', dynamicAnchors: [ 'LeftMiddle' ] } );

jsPlumb.connect({ uuids: ['a-source', 'b-target'] });