JSFiddle - React, Tailwind, and code Playground

by adardesign

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="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;
}
.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: $('#item12'),
        anchors: [ "Continuous" ],
        connector:[ "Flowchart" ],
        paintStyle: {
            strokeStyle: "#000000", 
            lineWidth:1
        }
    });
});