JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/4.0.3/go.js"></script>
<div id="myDiagramDiv" style="height: 600px; width: 100%; border: 1px solid black"></div>

JavaScript

function init() {
  myDiagram = new go.Diagram('myDiagramDiv', {
    contentAlignment: go.Spot.TopLeft,
    padding: new go.Margin(20),
    layout: new go.TreeLayout({
      angle: 90,
      arrangement: go.TreeArrangement.Horizontal,
      isRealtime: false,
    }),
  });

  const cellSize = 35;
  const headerHeight = 10;

  // ============================================================
  // GRID
  // ============================================================

  myDiagram.grid = new go.Panel('Grid', {
    gridCellSize: new go.Size(cellSize, cellSize),
  }).add(
    new go.Shape('LineH', {
      stroke: 'lightgray',
      strokeWidth: 0.5,
    }),
    new go.Shape('LineV', {
      stroke: 'lightgray',
      strokeWidth: 0.5,
    }),
  );

  myDiagram.grid.visible = true;
  myDiagram.toolManager.draggingTool.isGridSnapEnabled = true;

  // ============================================================
  // DEFAULT NODE TEMPLATE
  // ============================================================

  myDiagram.nodeTemplate = new go.Node('Spot', {
    locationObjectName: 'SHAPE',
    locationSpot: go.Spot.TopLeft,
  })
    .bind('location', 'loc', go.Point.parse)
    .add(
      // Main 35x35 square
      new go.Panel('Spot', {
        name: 'SHAPE',
        desiredSize: new go.Size(cellSize, cellSize),
      }).add(
        new go.Shape('Rectangle', {
          stretch: go.Stretch.Fill,
          stroke: null,
        }).bind('fill', 'color'),

        new go.TextBlock({
          margin: 7,
          font: 'Bold 14px Sans-Serif',
        }).bind('text', 'key'),
      ),

      // Header
      new go.Shape('Rectangle', {
        width: cellSize,
        height: headerHeight,
        fill: 'gray',
        stroke: null,
        alignment: new go.Spot(0.5, 0, 0, -headerHeight / 2),
      }).bind('visible', 'hasHeader'),
    );

  // ============================================================
  //...