JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js&quot;"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://creativecouple.github.io/jquery-timing/jquery-timing.min.js"></script>
<div id="draggable3" class="draggable ui-widget-content">
  <p>Drag me around</p>
</div>
<br style="clear: both;" />
<div id="draggable4" class="draggable ui-widget-content">
  <p>Drag me around</p>
</div>

CSS

.draggable {
  background: #deb;
  line-height: 40px;
  padding: 15px;
  float: left;
  margin: 1em;
  border: 1px dotted;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.demo {
  border: 5px solid;
  z-index: 2;
  display: table;
  border-radius: 90px;
  /*pointer-events:none;*/
  color: rgb(200, 200, 200);
  color: rgba(0, 0, 0, 0.7);
}

.demo:hover {
  color: #ff2a21;
}

JavaScript

// This is the connections js library file 

(function($) {
  $.fn.connections = function(options) {
    if (options === 'update') {
      return processConnections(update, this);
    } else if (options === 'remove') {
      return processConnections(destroy, this);
    } else {
      options = $.extend(true, {
        borderClasses: {},
        'class': 'connection',
        css: {},
        from: this,
        tag: 'connection',
        to: this,
        within: ':root'
      }, options);
      connect(options);
      return this;
    }
  };

  $.event.special.connections = {
    teardown: function(namespaces) {
      processConnections(destroy, $(this));
    }
  }

  var connect = function(options) {
    var borderClasses = options.borderClasses;
    var tag = options.tag;
    var end1 = $(options.from);
    var end2 = $(options.to);
    var within = $(options.within);
    delete options.borderClasses;
    delete options.tag;
    delete options.from;
    delete options.to;
    delete options.within;
    within.each(function() {
      var container = this;
      var done = new Array();
      end1.each(function() {
        var node = this;
        done.push(this);
        end2.not(done).each(function() {
          createConnection(container, [node, this], tag, borderClasses, options);
        });
      });
    });
  };

  var createConnection = function(container, nodes, tag, borderClasses, options) {
    var css = $.extend({
      position: 'absolute'
    }, options.css);
    var connection = $('<' + tag + '/>', options).css(css);
    connection.appendTo(container);

    var border_w = (connection.outerWidth() - connection.innerWidth()) / 2;
    var border_h = (connection.outerHeight() - connection.innerHeight()) / 2;

    if (border_w <= 0 && border_h <= 0) {
      border_w = border_h = 1;
    }

    var data = {
      borderClasses: borderClasses,
      border_h: border_h,
      border_w: border_w,
      node_from: $(nodes[0]),
      node_to: $(nodes[1]),
   ...