JSFiddle - React, Tailwind, and code Playground

by zoldello

HTML

<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */
    
.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;
}

</style>

<body>

<!-- load the d3.js library -->    	
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
	
const treeData = {
                    name: 'H9 Stem Cell',
                    children: [
                        {
                            name: 'Hepatocyte',
                            children: null,
                        }, {
                            name: 'Splanchnic Mesodermal Cell',
                            children: [
                                {
                                    name: 'Smooth muscle Cell',
                                    children: null,
                                },
                                {
                                    name: 'Mesothelial Cell',
                                    children: null,
                                },
                            ],
                        },
                        {
                            name: 'Lateral Mesodermal Cell',
                            children: null,
                        },
                        {
                            name: 'Neural Crest Cell',
                            parent: 'H9 Stem Cell',
                            children: [
                                {
                                    name: 'Mesenchymal Stem Cell',
                                    children: null,
                                },
                            ],
                        },
                        {
                            name: 'Neural Progenitor Cell',
                            children: null,
                        },
                        {
   ...