JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://jsplumb.googlecode.com/files/jquery.jsPlumb-1.3.1-all.js"></script>
<section>
    <div id="a">
        <span>text</span>
    </div>
    
    <div id="b">
        <span>text</span>
    </div>
</section>

CSS

section {
    background-color: #eee;
    position: relative;
    top: 3em;
    height: 20em;
    width: 100%;
}

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

#a {
    top: 5em;
    left: 5em;
}
#b {
    top: 8em;
    left: 20em;
}

JavaScript

var instance = jsPlumb.getInstance();

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

instance.setRenderMode( 'canvas' );

instance.connect({
    source: a,
    target: b,
    anchors: [ 'Center', 'Center' ],
    connector: [ 'Straight' ],
    //endpoint:"Blank",
    EndPoint:[ "Dot", { radius:5 } ],   
    endpointStyle:{fillStyle:"red"}
});
instance.draggable('a');