JSFiddle - React, Tailwind, and code Playground

by Denis Tverdokhlebov

HTML

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>

  <head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>

  <body>
    <style>
      ._jsPlumb_connector {
        z-index: 100;
      }
      
      .rocon {
        z-index: 10;
      }
      
      .tasks-box {
        float: left;
      }
      
      .tasks-box h4 {
        margin: 0;
        padding-bottom: .5em;
      }
      
      .tasks-box .window {
        position: relative;
        border: 1px solid #225588;
        background: white;
        padding: 1em;
        margin: 1.5em 3.5em;
        float: left;
        clear: left;
        z-index: 10;
      }
      
      .tasks-box a {
        color: #039;
        text-decoration: none;
        border-bottom: 2px solid #039;
      }
      
      .tasks-box a:hover {
        border-bottom: 2px dotted gray;
        color: gray;
      }

    </style>
    <script src="https://jsplumbtoolkit.com/lib/jsplumb.min.js"></script>
    <div id="plumbs" class="tasks-box">

      <div class="window rc15" id="window1" also-connection-with="window6:bottom-top">
        <h4>Task name 1</h4>
        <em>Description</em>
      </div>
      <div class="window rc15" id="window2">
        <h4>Task name 2</h4>
        <em>Description</em>
      </div>
      <div class="tasks-box">
        <div class="window rc15" id="window4">
          <h4>Task name 4</h4>
          <em>Description</em>
        </div>
        <div class="window rc15" id="window5">
          <h4>Task name 5</h4>
          <em>Description dsfa dsfdsaf das fdsaf dsf dasf sdfdsf</em>
        </div>
        <div class="window rc15" id="window6">
          <h4>Task name 6</h4>
          <em>Description</em>
        </div>
        <div class="tasks-box">
         ...

JavaScript

$(function() {
  var common = {
    cssClass: "myCssClass"
  };
  jsPlumb.connect({
    target: 'mkb_2',
    source: 'UL_group',
    anchor: "Continuous",
    endpoint: ["Dot", {
      radius: 5,
      hoverClass: "myEndpointHover"
    }, common],
    connector: ["Bezier", {
      curviness: 100
    }, common],
    overlays: [
      ["Arrow", {
        location: 1
      }, common]
    ]
  });
  jsPlumb.draggable("mkb_2");



  var common = {
    cssClass: "myCssClass"
  };
  jsPlumb.connect({
    target: 'mkb_2',
    source: 'UL_group',
    anchor: "Continuous",
    endpoint: ["Dot", {
      radius: 5,
      hoverClass: "myEndpointHover"
    }, common],
    connector: ["Bezier", {
      curviness: 100
    }, common],
    overlays: [
      ["Arrow", {
        location: 1
      }, common]
    ]
  });
  jsPlumb.draggable("mkb_2");



  var common = {
    cssClass: "myCssClass"
  };
  jsPlumb.connect({
    target: 'mkb_2',
    source: 'UL_group',
    anchor: "Continuous",
    endpoint: ["Dot", {
      radius: 5,
      hoverClass: "myEndpointHover"
    }, common],
    connector: ["Bezier", {
      curviness: 100
    }, common],
    overlays: [
      ["Arrow", {
        location: 1
      }, common]
    ]
  });
  jsPlumb.draggable("mkb_2");







  jsPlumb.draggable("father_1");
  jsPlumb.connect({
    target: 'UL_group',
    source: 'father_1',
    paintStyle: {
      strokeWidth: 1,
      stroke: "#000000"
    },
    overlays: [
      ["Arrow", {
        location: 1
      }]
    ]
  });
  jsPlumb.draggable("UL_group");

  jsPlumb.connect({
    target: 'sbn_1',
    source: 'UL_group',
    paintStyle: {
      strokeWidth: 1,
      stroke: "#008000"
    },
    overlays: [
      ["Arrow", {
        location: 1
      }]
    ]
  });
  jsPlumb.draggable("sbn_1");

  jsPlumb.connect({
    target: 'sbn_2',
    source: 'UL_group',
    paintStyle: {
      strokeWidth: 1,
      stroke: "#008000"
    },
    overlays: [
      ["Arrow", {
        location: 1
      }]
    ]
  });
 ...