JSFiddle - React, Tailwind, and code Playground

by buinam3112

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Monitor Service</title>
    <style>
        .node {
            cursor: pointer;
        }
        .node circle {
            fill: #fff;
            stroke: coral;
            r: 10 ;
            stroke-width: 2px;
        }
        .node text {
            font: 14px sans-serif;
        }
        .link {
            fill: none;
            stroke: #287233;
            stroke-width: 2px;
        }
    </style>
</head>

<body>

<script src="https://d3js.org/d3.v3.min.js"></script>

<script>
    var treeData = {
        "name": "ROOT",
        "type": "red",
        "children": [
            {
                "name": "Group 1",
                "type": "red",
                "children": [
                    {
                        "name": "Children 1",
                        "type": "red",
                        "children": [
                            {
                                "name": "name 1",
                                "type": "red"
                            },
                            {
                                "name": "name 2"
                            }
                        ]
                    },
                    {
                        "name": "Children 2",
                        "children": [
                            {
                                "name": "name 3"
                            },
                            {
                                "name": "name 4"
                            }
                        ]
                    }
                ]
            },
            {
                "name": "Group 2",
                "children": [
                    {
                        "name": "Children 1",
                        "children": [
                            {
                                "name": "name 1"
                            },
                            {
                               ...

CSS

<style>
        .node {
            cursor: pointer;
        }
        .node circle {
            fill: #fff;
            stroke: coral;
            r: 10 ;
            stroke-width: 2px;
        }
        .node text {
            font: 14px sans-serif;
        }
        .link {
            fill: none;
            stroke: #287233;
            stroke-width: 2px;
        }
    </style>