JSFiddle - React, Tailwind, and code Playground

HTML

<body>

CSS

.node {
  cursor: pointer;
}

.node circle {
  fill: #fff;
  stroke: steelblue;
  stroke-width: 1.5px;
}

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

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

JavaScript

var flare = {

    "Name": "Example",
    "children1": [

   {
      "BName":"Rick",
      "Email":"",
      "children1":[
         {
           
            
            "NickName":"AVCX 12312",
            "id":1
         
         },
         {
         
            "rejectreason":null,
            "NickName":"ADS 52312312",
            "id":27
          
         },
         {
            
            "NickName":"ASADSCC  4124321 ASDS",
            "id":39
            
         },
         {
           
            "NickName":"SS 23 AS",
            "id":45
         
         },
         {
            
            "NickName":"Logic 51345431",
            "id":59
            
         },
         {
            
            "NickName":"CM 63435 ASAS",
            "id":71

         },
         
         {
           
            "NickName":"Nod 534153 SAe",
            "id":93
      
         },
         {
            
            "NickName":"Chips 5314531 AS",
            "id":95
           
         }
      ],
    
      
   },
   {
      "BName":"Ja",   
      "Email":"",
      "children1":[
         {
            
            "NickName":"NC 534531",
            "id":2
           
         },
         {
      
            "NickName":"Crow 6346 ",
            "id":44
         
         },
         {
      
            "NickName":"Mobile 64363 ",
            "id":57

          },
        
         {
           
            "NickName":"Fi 6346413",
            "id":68
            
         }
      ],
      
   }
]};

var margin = {top: 20, right: 120, bottom: 20, left: 120},
    width = 960 - margin.right - margin.left,
    height = 800 - margin.top - margin.bottom;
    
var i = 0,
    duration = 750,
    root;

var tree = d3.layout.tree()
    .size([height, width])
    .children(function(d) { return d.children1; });

var diagonal = d3.svg.diagonal()
    .projection(function(d) { return [d.x, d.y]; });

var svg = d3.select("body").append("svg")
   ...