JSFiddle - React, Tailwind, and code Playground

by satoshi_tanoue

HTML

<script src="https://unpkg.com/gojs/release/go-debug.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover" />
  <meta name="description"
    content="Create new collapsible groups, ungroup existing groups, and use drag-and-drop to change grouping memberships." />
  <link rel="stylesheet" href="../assets/css/style.css" />
  <!-- Copyright 1998-2021 by Northwoods Software Corporation. -->
  <title>Regrouping Demo</title>
</head>

<body>
  <!-- This top nav is not part of the sample code -->
  <div class="md:flex flex-col md:flex-row md:min-h-screen w-full max-w-screen-xl mx-auto">
    <div id="navSide" class="flex flex-col w-full md:w-48 text-gray-700 bg-white flex-shrink-0"></div>
    <!-- * * * * * * * * * * * * * -->
    <!-- Start of GoJS sample code -->

    <script src="../release/go.js"></script>
    <div class="p-4 w-full">
      <script id="code">
        function init() {
          var $ = go.GraphObject.make;

          myDiagram =
            $(go.Diagram, "myDiagramDiv",
              {
                // when a drag-drop occurs in the Diagram's background, make it a top-level node
                mouseDrop: function (e) { finishDrop(e, null); },
                layout:  // Diagram has simple horizontal layout
                  $(go.GridLayout,
                    { wrappingWidth: Infinity, alignment: go.GridLayout.Position, cellSize: new go.Size(1, 1) }),
                "commandHandler.archetypeGroupData": { isGroup: true, text: "Group", horiz: false },
                "undoManager.isEnabled": true
              });

          // The one template for Groups can be configured to be either layout out its members
          // horizontally or vertically, each with a different default color.

          function makeLayout(horiz) {  // a Binding conversion function
            if (horiz) {
              return...