JSFiddle - React, Tailwind, and code Playground

HTML

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

<head>
    <meta charset="utf-8">
    <title>Webpack App</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
        .links line {
            stroke-opacity: 0.6;
            stroke-width: 1px;
            fill: none;
        }

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

        .node {
            fill: #FFFFFF;
        }

        .node:hover {
            fill: #F3F2F1;
        }

        .node:active {
            fill: #EDEBE9;
        }

        .edge-connection {
            fill: #D9EDFE;
        }

        .edge-connection-text {
            fill: black;
            font-family: 'Segoe UI';
            font-size: 13px;
        }

        svg {
            background: #F7FAFF;
            width: 1324px;
            height: 324px;
        }
    </style>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="index.js"></script>
    <script defer="" src="index_bundle.js"></script>
</head>

<body>
    <div id="graphContainer"><svg>
            <defs>
                <marker id="arrowStart" refX="6" refY="9" markerWidth="22" markerHeight="22" orient="auto">
                    <circle cx="4" cy="9" r="3" orient="auto" style="stroke: rgb(50, 120, 224); fill: none;"></circle>
                </marker>
            </defs>
            <defs>
                <marker id="arrowEnd" refX="6" refY="6" markerWidth="12" markerHeight="12" orient="auto">
                    <path d="M-5,-3 L7,6 L-8,20" style="stroke: rgb(50, 120, 224); fill: none;"></path>
                </marker>
            </defs>
            <g transform="translate(20, 50)">
                <rect class="node"width="250" height="30" stroke='black' stroke-width='2'></rect>
                <circle cx="15" cy="15" r="15" fill="transparent" stroke="lightgray"
                    stroke-width="0.1" width="18"...