JSFiddle - React, Tailwind, and code Playground

HTML

<body>
</body>

CSS

.node circle {
            cursor: pointer;
            stroke: #3182bd;
            stroke-width: 1.5px;
        }

        .node text {
            font: 10px sans-serif;
            pointer-events: none;
            text-anchor: middle;
        }

        line.link {
            fill: none;
            stroke: #9ecae1;
            stroke-width: 1.5px;
        }

JavaScript

var width = 960,
            height = 500,
            root;

    var force = d3.layout.force()
            .linkDistance(80)
            .charge(-120)
            .gravity(.05)
            .size([width, height])
            .on("tick", tick);

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

    var link = svg.selectAll(".link"),
            node = svg.selectAll(".node");
    
var root = {
    "name": "root",
    "children": [{
        "name": "leaf1"
    }, {
        "name": "leaf2"
    }]
};


    update();

    function update() {
        var nodes = flatten(root),
                links = d3.layout.tree().links(nodes);

        // Restart the force layout.
        force
                .nodes(nodes)
                .links(links)
                .start();

        // Update links.
        link = link.data(links, function(d) { return d.target.id; });

        link.exit().remove();

        link.enter().insert("line", ".node")
                .attr("class", "link");

        // Update nodes.
        node = node.data(nodes, function(d) { return d.id; });

        node.exit().remove();

        var nodeEnter = node.enter().append("g")
                .attr("class", "node")
                .on("click", click)
                .call(force.drag);

        nodeEnter.append("circle")
                .attr("r", function(d) { return Math.sqrt(d.size) / 10 || 4.5; });

        nodeEnter.append("text")
                .attr("dy", ".35em")
                .text(function(d) { return d.name; });

        node.select("circle")
                .style("fill", color);

    }

    function tick() {
        link.attr("x1", function(d) { return d.source.x; })
                .attr("y1", function(d) { return d.source.y; })
                .attr("x2", function(d) { return d.target.x; })
                .attr("y2", function(d) { return d.target.y; });

        node.attr("transform", function(d) { return "translate(" +...