JSFiddle - React, Tailwind, and code Playground

HTML

<div id="plumbs" class="tasks-box">
<script src="https://jsplumbtoolkit.com/lib/jsplumb.min.js"></script>
  <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">
      <div class="window rc15" id="window8" also-connection-with="window4:right-right; window5:right-right; window6:bottom-bottom">
        <h4>Task name 8</h4>
        <em>Description dsf adsf adsfdasf df</em>
      </div>
    </div>
  </div>
  <div class="window rc15" id="window3">Text block 3</div>
  <div class="window rc15" id="window7"><a href="http://morrisonpitt.com/jsPlumb/doc/usage.html" title="Documentation">jsPlumb docs</a></div>
</div>
<br clear="all" />

CSS

._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;
}

JavaScript

//$("#window1").plumb({target: 'window2'});
console.log(jsPlumb);
jsPlumb.connect({
  source:"window8", 
  target:"window3",
  anchors:["Right", "Left" ],
  endpoint:"Rectangle",
  endpointStyle:{ fill: "yellow" }
});