JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<div id="svg1"></div>
</body>

CSS

body {
      margin:0;
      position:fixed;
      top:0;right:0;bottom:0;left:0;
    }
    
    .node circle {
      fill: #fff;
      stroke: steelblue;
      stroke-width: 3px;
    }

    .node text { font: 12px sans-serif; }

    .node--internal text {
      text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;
    }

    .link {
      fill: none;
      stroke: #ccc;
      stroke-width: 2px;
    }

JavaScript

// set the dimensions and margins of the diagram
	const width = 1181;
	const height = 776;
	
	const margin = {
	top: 50,
	left: 30
	};
	
	
	
	var svg = d3.select("#svg1").append("svg")
	.attr("width", width)
	.attr("height", height)
	.call(d3.zoom().on("zoom", function () {
		svg.attr("transform", d3.event.transform);
	}))
	.append('g').attr("transform","translate(" + width / 2 + "," + 0 + ")");
	
	
	
	
	//d3.json("/ORGANIGRAMME_WEB/graph6.json").then(function(data) {		
	
  const data = {
  name: 'Avinash Rao',
  children: [
    {
      name: 'Matt Burgess',
      children: [
        {
          name: 'Sam Burgess'
        },
        {
          name: 'Katja Meyer'
        },
        {
          name: 'John Salter'
        },
        {
          name: 'Tony Camps'
        }
      ]
    },
    {
      name: 'Matt Coyle',
      children: [
        {
          name: 'Katja Meyer'
        },
        {
          name: 'John Salter'
        },
        {
          name: 'Tony Camps'
        }
      ]
    },
    {
      name: 'Uros Rapajic',
      children: [
        {
          name: 'Matti John'
        },
        {
          name: 'Tom Robinson',
          children: [
            {
              name: 'Matti John'
            },
            {
              name: 'Tom Robinson'
            },
            {
              name: 'Victor Sanchez'
            }
          ]
        },
        {
          name: 'Victor Sanchez',
          children: [
            {
              name: 'Matti John'
            },
            {
              name: 'Tom Robinson'
            },
            {
              name: 'Victor Sanchez'
            }
          ]
        }
      ]
    },
    {
      name: 'Renaud Lambiotte',
      children: [
        {
          name: 'Matti John'
        },
        {
          name: 'Tom Robinson'
        },
        {
          name: 'Victor Sanchez'
        }
      ]
    }
  ]
};
  
	const innerWidth = width - (2 * margin.left);
	const innerHeight =...