JSFiddle - React, Tailwind, and code Playground

by ivanchaer

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3plus/1.8.0/d3plus.min.js"></script>

CSS

html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  text-align: center;
  overflow: hidden;
}

svg {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.person rect {
  fill: #fff;
  stroke: steelblue;
  stroke-width: 1px;
}

.person {
  font: 16px sans-serif;
}

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

JavaScript

$(function() {

      var json = {
        name: "Maude Charlotte Licia",
        id: "06ada7cd-3078-54bc-bb87-72e9d6f38abf",
        _parents: [{
          name: "Licia ",
          _parents: [{
            name: "Licia Charlotte Fernandez Maude Licia Licia Charlotte Charlotte Fernandez Charlotte Fernandez Fernandez Licia Licia Fernandez Fernandez Licia Maude ",
            _parents: [{
              name: "Charlotte Charlotte Charlotte Maude Maude Fernandez Charlotte ",
              _parents: [{
                name: "Maude Charlotte Licia Fernandez Licia Fernandez Charlotte Charlotte Licia Charlotte Fernandez Fernandez Maude Maude Fernandez Licia ",
                _parents: [{
                  name: "Fernandez Licia Licia Charlotte Licia Licia Maude Licia Charlotte Licia Fernandez Fernandez Charlotte Charlotte Maude Charlotte Maude Fernandez Charlotte Charlotte ",
                  _parents: [{
                    name: "Maude Charlotte Charlotte Charlotte Maude Charlotte Maude Fernandez Licia Fernandez Charlotte Charlotte Maude Licia Charlotte Fernandez Charlotte Licia Maude Maude ",
                    _parents: [{
                      name: "Licia Maude Fernandez Maude Charlotte Charlotte Licia Licia Licia Charlotte Fernandez ",
                      id: 9721955
                    }, {
                      name: "Licia Charlotte Licia Fernandez Licia Fernandez Licia Licia Licia Charlotte Charlotte Maude Maude Charlotte Fernandez Charlotte Fernandez Fernandez ",
                      id: 4846470
                    }, {
                      name: "Maude Charlotte Licia Licia Maude Fernandez Charlotte Fernandez Maude Maude Charlotte Fernandez Fernandez Charlotte Fernandez ",
                      id: 2357773
                    }],
                    id: 2392653
                  }, {
                    name: "Licia Maude Charlotte Licia Maude Charlotte Maude Licia Licia Maude Fernandez Fernandez Charlotte Charlotte Charlotte Licia Fernandez...