JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<script src="http://jsplumb.org/js/1.3.3/jquery.jsPlumb-1.3.3-all-min.js"></script>
<div id="w1" class="w">w1</div>
<div id="w2" class="w">w2</div>

CSS

.w {
    width:3em;height:3em;border:1px solid blue;position:absolute;
}


#w1 {  left:5em; }
#w2 {  left:25em; }

JavaScript

jsPlumb.ready(function() {

    jsPlumb.setRenderMode(jsPlumb.SVG);
    
    var connection = jsPlumb.connect({
        source:"w1",
        target:"w2",        
        connector:"Straight",
        paintStyle:{lineWidth:3,strokeStyle:"#056"},
        overlays:[
            [ "Diamond", {
                location:0.5, length: 4,
              events:{
              "click":function() { alert("click", arguments); },
                  "mouseenter":function() { console.log("over", arguments); },
                  "mouseexit":function() { console.log("out", arguments); }              
              }                
            }]
        ]
    });
    
});