JSFiddle - React, Tailwind, and code Playground

by philfreo

HTML

<div id="tree"></div>

CSS

#tree div {
    border: solid 1px black;
    padding: 10px;
    
}

JavaScript

var data = [
    {
        name: 'John Doe',
        children: [{ name: 'Adam Andrews'}, { name: 'Sally Salinger' }]
    },
    {
        name: 'Peter Pan',
        children: [{
            name: 'Margaret Moody',
            children: [{name:'Jessica Johnson'}]
        }]
    }
];

function tree(parentEl, node, offset) {
    var el = $('<div class="person">');
    el.css('left', 10*i);
    el.html(node.name);
    parentEl.append(el);
    if (!node.children) return;
    for (var i = 0; i < node.children.length; i++) {   
        tree(el, node.children[i], i);
    }
}

for (var i = 0; i < data.length; i++) {
    tree($('#tree'), data[i], i);
}