JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://jsplumb.org/js/dom.jsPlumb-1.7.5-min.js"></script>
<div id="botoes">
    <button id="addBloco">Adicionar Bloco</button>
    <button id="salvar">Salvar</button>
</div>

<div id="grafico"></div>

CSS

html, body {width:100%;height:100%;overflow:hidden;}
body {background-color:#fff;margin:0;padding:0;}
#botoes {background-color:#ccc;padding:10px;box-shadow:0 0 3px #333;}
#grafico {width:100%;height:100%;position:relative;font-size: 80%;text-align: center;}
#addBloco {cursor:pointer;}
.window {display:block;width:100px;height:100px;border:2px solid green;background-color: #eeeeef;border-radius: 0.5em;box-shadow: 2px 2px 19px #aaa;color: black;cursor: pointer;font-family: helvetica;font-size: 0.9em;height: 80px;line-height: 80px;opacity: 0.8;padding: 0.5em;position: absolute;text-align: center;transition: box-shadow 0.15s ease-in 0s;width: 80px;z-index: 20;}
            
            ._jsPlumb_endpoint, .endpointTargetLabel, .endpointSourceLabel {
                cursor: pointer;
                z-index: 21;
            }

JavaScript

jsPlumb.ready(function() {

    // Instancia Objeto
    var instancia = jsPlumb.getInstance({
        DragOptions: { cursor: 'pointer', zIndex: 2000 },
        ConnectionOverlays: [
            [ "Arrow", { location: 1 } ],
            [ "Label", {
                location: 0.1,
                id: "label",
                cssClass: "aLabel"
            }]
        ],
        Container: "grafico"
    });

    /* # ESTILO # */

    var connectorPaintStyle = {
        lineWidth: 4,
        strokeStyle: "#61B7CF",
        joinstyle: "round",
        outlineColor: "white",
        outlineWidth: 2
    },

    connectorHoverStyle = {
        lineWidth: 4,
        strokeStyle: "#216477",
        outlineWidth: 2,
        outlineColor: "white"
    },

    endpointHoverStyle = {
        fillStyle: "#216477",
        strokeStyle: "#216477"
    },

    sourceEndpoint = {
        endpoint: "Dot",
        paintStyle: {
            strokeStyle: "#7AB02C",
            fillStyle: "transparent",
            radius: 7,
            lineWidth: 3
        },
        isSource: true,
        connector: [ "Flowchart", { stub: [40, 60], gap: 10, cornerRadius: 5, alwaysRespectStubs: true } ],
        connectorStyle: connectorPaintStyle,
        hoverPaintStyle: endpointHoverStyle,
        connectorHoverStyle: connectorHoverStyle,
        dragOptions: {},
        /*overlays: [
            [ "Label", {
                location: [0.5, 1.5],
                label: "Drag",
                cssClass: "endpointSourceLabel"
            } ]
        ]*/
    },

    targetEndpoint = {
        endpoint: "Dot",
        paintStyle: { fillStyle: "#7AB02C", radius: 11 },
        hoverPaintStyle: endpointHoverStyle,
        maxConnections: -1,
        dropOptions: { hoverClass: "hover", activeClass: "active" },
        isTarget: true,
        /*overlays: [
            [ "Label", { location: [0.5, -0.5], label: "Drop", cssClass: "endpointTargetLabel" } ]
        ]*/
    },

    init = function (connection) {
 ...