JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://jsplumb.org/js/jquery.jsPlumb-1.3.8-all-min.js"></script>
        <script type="text/javascript" src="/js/jquery.jsPlumb-1.3.8-all-min.js"></script>
    </head>
        <div id="root">
            <div class="item" id="item1">Item 1</div>
            <div class="item" id="item2">Item 2</div>
            <div class="item" id="item3">Item 3</div>
            <div class="item" id="item4">Item 4</div>
            <div class="item" id="item5">Item 5</div>
            <div class="item" id="item6">Item 6</div>
            <div class="item" id="item7">Item 7</div>
            <div class="node" id="8-12"></div>
            <div class="item" id="item8">Item 8</div>
            <div class="item" id="item9">Item 9</div>
            <div class="item" id="item10">Item 10</div>
            <div class="item" id="item11">Item 11</div>
            <div class="item" id="item12">Item 12</div>
            <div class="item" id="item13">Item 13</div>
            <div class="item" id="item14">Item 14</div>

        </div>

CSS

body {
    padding: 10px;
}

.item {
    background-color: #fafafa;
    border: 1px solid #f0f0f0;
    display: inline-block;
    float:left;
    text-align:center;
    padding: 20px;
    margin:0 20px 20px 0;
    width:80px;
}

.node {
    position: absolute;
    height: 0px;
    width: 0px;
    background-color: blue;
    visibility: hidden;
    left: 285px;
    top: 160px;
}

.row {
    margin: 20px 0px 20px 0px;
}

JavaScript

jsPlumb.ready(function() {

    jsPlumb.importDefaults({
        Anchors: [ "TopCenter" ],
        Endpoint : ["Dot", { radius: 2 }],
        HoverPaintStyle : {strokeStyle: "#42a62c", lineWidth: 1 }
        
    });

    jsPlumb.connect({
        source: $('#item2'),
        target: $('#item7'),
        anchors: [ "Continuous" ],
        connector:[ "Flowchart" ],
        paintStyle: {
            strokeStyle: "#000000", 
            lineWidth:1
        }
    });
    jsPlumb.connect({
        source: $('#item8'),
        target: $('#8-12'),
        connector:[ "Flowchart", {stub:5} ],
        paintStyle: {
            strokeStyle: "#000000", 
            lineWidth:1
        },
        anchors:[ [0,0.5,-1,0],[0.5,0,0,-1] ],
        endpoints:[ ["Dot", {radius:2}],["Blank"] ]
    });
    jsPlumb.connect({
        source: $('#8-12'),
        target: $('#item12'),
        connector:[ "Flowchart", {stub:5} ],
        paintStyle: {
            strokeStyle: "#000000", 
            lineWidth:1
        },
        anchors:[ [0,0.5,-1,0],[0.5,0,0,-1] ],
        endpoints:[ ["Blank"],["Dot", {radius:2}] ]
    });
});