JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jsPlumb/1.4.1/jquery.jsPlumb-1.4.1-all-min.js"></script>
<button id='addproject' type="button">Add project!</button>
<button id='deleteallcons' type="button">Delete all connections</button>
<button id='deleteall' type="button">Delete all</button>
<button id='repaintall' type="button">Repaint all</button>
<button id='getconnectionids' type="button">Get Connection IDs</button>
<div id="container">
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Montserrat);

* {
  font-family: 'Montserrat', sans-serif;
}
#container {
  position: relative;
  border: 1px solid #aaaaaa;
  width: 100%;
  height: 650px;
  background: #F7F7F7;
}
.title {
  padding: 10px;
}
.project {
  cursor: move;
  border: 1px solid gray;
  width: 200px;
  height: auto;
  background: #4DAF7C;
  color: #ffffff;
  position: absolute;
}
.task {
  color: #723D61;
  font-size: 16px;
  border: 1px solid #D8D8D8;
  background-color: #ffffff;
  cursor: pointer;
}

JavaScript

jsPlumb.ready(function() {
  // Temporary variable for identifying new projects/tasks
  var i = 6;

  // Style and properties of container/connections/endpoints
  jsPlumb.Defaults.Container = $("#container");
  jsPlumb.Defaults.PaintStyle = { strokeStyle:"#F09E30", lineWidth:2, dashstyle: '3 3', };
  jsPlumb.Defaults.EndpointStyle = { radius:7, fillStyle:"#F09E30" };
  jsPlumb.importDefaults({Connector : [ "Bezier", { curviness:50 } ]});
    
  // Deletes everything inside the container
  $('#deleteall').click(function(e) {
    $('#container').text("");
    i=1;
  });

  // Deletes all jsplumb connections
  $('#deleteallcons').click(function(e) {
    jsPlumb.detachEveryConnection();
  });

  // Repaints all jsplumb connections
  $('#repaintall').click(function(e) {
    jsPlumb.repaintEverything();
  });

  // Adds a project to the container
  $('#addproject').click(function(e) {
    addProject("project" + i);
    i++;
  });

  // Displays individually the current connections information
  $('#getconnectionids').click(function(e) {
    $.each(jsPlumb.getConnections(), function (idx, connection) {
        alert(connection.id + " : " + connection.sourceId + " : " + connection.targetId);
      });
  });
    
  // Clicking on the project adds a task to that project
  $("#container").on('click','.project',function(e) {
    addTask($(this), 'task' + i);
    i++;
  });  
  
  // For this example, predefined sample projects are added
  addProject("project" + 1, 50, 50);
  addTask($('#project1'), 'task' + 1);
  addTask($('#project1'), 'task' + 2);
  
  addProject("project" + 2, 50, 300);
  addTask($('#project2'), 'task' + 3);
  addTask($('#project2'), 'task' + 4);
});

// Adds the project div to the container at a specific location
function addProject(id, posX, posY) {
  var newProject = $('<div>').attr('id', id).addClass('project');
  
  // A title for the project  
  var title = $('<div>').addClass('title').text(id);
  newProject.append(title);

  newProject.css({
     ...