JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
Filter: <input type="text" name="filter" id="filter"/>
<button id = 'reset'>Reset Filter</button><br >

CSS

.links line {
  stroke: #999;
  stroke-opacity: 0.6;
}

.nodes circle {
  stroke: #000;
  stroke-width: 1.5px;
}

text {
  font-size: 10px;
}

.tooltip {
  position: absolute;
  z-index: 9999;
  visibility: hidden;
  padding: 2px;
  text-align: center;
  width: 150px;
  color: white;
  background-color: #009cdc;
  border-radius: 10px;
  box-shadow: 0 1px 8px rgba(0,0,0,0.5)
}

JavaScript

var graph = {
  'nodes': [{
      'id': 'Menu',
      'group': 0
    },
    {
      'id': 'Item1',
      'group': 1
    },
    {
      'id': 'Item2',
      'group': 1
    },
    {
      'id': 'Item3',
      'group': 1
    },
    {
      'id': 'Item4',
      'group': 1
    },
    {
      'id': 'Item5',
      'group': 1
    },
    {
      'id': 'SubItem1_Item1',
      'group': 2
    },
    {
      'id': 'SubItem2_Item1',
      'group': 2
    }
  ],
  'links': [

    {
      'source': 'Menu',
      'target': 'Item1',
      'value': 1,
      'type': 'A'
    },
    {
      'source': 'Menu',
      'target': 'Item2',
      'value': 8,
      'type': 'A'
    },
    {
      'source': 'Menu',
      'target': 'Item3',
      'value': 10,
      'type': 'A'
    },
    {
      'source': 'Menu',
      'target': 'Item3',
      'value': 1,
      'type': 'A'
    },
    {
      'source': 'Menu',
      'target': 'Item4',
      'value': 1,
      'type': 'A'
    },
    {
      'source': 'Menu',
      'target': 'Item5',
      'value': 1,
      'type': 'A'
    },

    /* Item1 is linked to SubItems */
    {
      'source': 'Item1',
      'target': 'SubItem1_Item1',
      'value': 2,
      'type': 'A'
    },
    {
      'source': 'Item1',
      'target': 'SubItem2_Item1',
      'value': 1,
      'type': 'A'
    },

    /* Interconnected Items */
    {
      'source': 'Item5',
      'target': 'Item4',
      'value': 2,
      'type': 'A'
    },
    {
      'source': 'Item2',
      'target': 'Item3',
      'value': 1,
      'type': 'A'
    },
  ]
};


var width = 800;
var height = 500;
var color = d3.scaleOrdinal(d3.schemeCategory10);

var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height);

var grads = svg.append("defs").selectAll("radialGradient")
  .data(graph.nodes)
  .enter()
  .append("radialGradient")
  .attr("gradientUnits", "objectBoundingBox")
  .attr("cx", 0)
  .attr("fill", function(d) {
    return color(d.id);
  })
  .attr("cy", 0)
 ...