JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://jsplumb.org/js/jquery.jsPlumb-1.3.8-all-min.js"></script>
<!DOCTYPE html> 
<html> 
    <head> 
        <script type="text/javascript" src="/js/jquery.jsPlumb-1.3.8-all-min.js"></script>
    </head>
    <body style="position:absolute;">
        <div id="root">
        </div>
        <div class="row">
            <div class="item" id="item1">
                Item1
            </div>
            <div class="item" id="item2">
                Item2
            </div>
        </div>
        <div class="row">
            <div class="item" id="item3">
                Item3
            </div>
        </div>
    </body>
</html>

CSS

body {
    padding: 10px;
}

.item {
    background-color: #fafafa;
    border: 1px solid #f0f0f0;
    display: inline-block;
    padding: 20px;
    margin-right: 20px;
}
.row {
    margin: 20px 0px 20px 0px;
}

JavaScript

jsPlumb.ready(function() {

    jsPlumb.importDefaults({
        Anchors: [ "TopCenter" ],
        Endpoint : ["Dot", { radius: 2 }],
        HoverPaintStyle : {strokeStyle: "#42a62c", lineWidth: 1 },
        ConnectionOverlays : [
            [ 
                "Arrow", {
                    location: 1,
                    id: "arrow",
                    length: 14,
                    foldback: 0.8
                } 
            ]
        ]
    });

    jsPlumb.connect({
        source: $('#item2'),
        target: $('#item3'),
        anchors: [ "Continuous" ],
        connector:[ "Flowchart" ],
        paintStyle: {
            strokeStyle: "#000000", 
            lineWidth:1
        }
    });
});