JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="http://fabricjs.com/lib/fabric.js"></script>
<canvas id='c' height=600 width=600></canvas>

JavaScript

var canvas = new fabric.Canvas('c', {
  width: 600,
  height: 600,
  selection: false
});

var id = 0, MoveAll = false;

var block = new fabric.Rect({
  left: 50,
  top: 50,
  width: 50,
  height: 50,
  fill: 'white',
  originX: 'left',
  originY: 'top',
  centeredRotation: true,
  lockScalingX: false,
  lockScalingY: false,
  lockRotation: false,
  hasControls: true,
  cornerSize: 8,
  hasBorders: true,
  strokeWidth: 3,
  stroke: 'red',
  strokeLineJoin: 'round',
  padding: 0,
  id: 'block',
  name: 'subject'
});

var text = addTextToRect(block);
block.width = text.width + 10;

var group = new fabric.Group([block, text], {id: 'bubbleGroup', name: 'subject'});
canvas.add(group);
console.log('bubble group: ' + JSON.stringify(group));

var rect = makeRect(100, 200, 5, 5, canvas);
canvas.add(rect);

var p1 = {x: group.getCenterPoint().x-10, y: group.getCenterPoint().y}, 
    p2 = {x: group.getCenterPoint().x+10, y: group.getCenterPoint().y}, 
    p3 = {x: rect.getCenterPoint().x, y: rect.getCenterPoint().y};
var shape = makePolygon(p1, p2, p3);
canvas.add(shape);
shape.sendToBack();

group.shape = shape;
group.rect = rect;

canvas.renderAll();

canvas.on('object:moving', function(e) {
  var p = e.target;
  console.log('target type: ' + p.type + ' :::: status: ' + p.status + ' || ' + p.get('status'));

  if (p.type === 'group' && p.status !== 'moving') {
    canvas.remove(p.shape);

    var p1 = {x: p.getCenterPoint().x-10, y: p.getCenterPoint().y}, 
        p2 = {x: p.getCenterPoint().x+10, y: p.getCenterPoint().y}, 
        p3 = {x: p.rect.getCenterPoint().x, y: p.rect.getCenterPoint().y};

    var shape = makePolygon(p1, p2, p3);

    canvas.add(shape);
    canvas.sendToBack(shape);
    p.shape = shape;
  } else if (p.type === 'rect') {
    var group = canvas.item(id - 1);
    canvas.remove(group.shape);

    var p1 = {x: group.getCenterPoint().x-10, y: group.getCenterPoint().y}, 
        p2 = {x: group.getCenterPoint().x+10, y: group.getCenterPoint().y}, 
      ...