JSFiddle - React, Tailwind, and code Playground

by sporritt

HTML

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

CSS

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

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

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

._jsPlumb_endpoint {
 z-index:10;   
}

JavaScript

var instance = jsPlumb.getInstance();

var ep = {
    isSource:true,
    isTarget:true,
    maxConnections:-1,
    paintStyle:{fillStyle:"blue"},
    endpoint:"Dot"
};

jsPlumb.addEndpoint("a", ep);
jsPlumb.addEndpoint("b", ep);