JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

#tree {
    margin-top: 2em;
    margin-right: 2em;
}

ul {
    padding: 0 0 0 2em;
    margin: 0;
}

li {
    padding: 0;
    padding-left: 1px;
    border-left: 1px dashed green;
    margin: 0;
    list-style: none;
}

li > div {
    padding: 2px 0.5em;
    border: 1px solid steelblue;
    margin-bottom: -1px;
    background-color: lightsteelblue;
}

JavaScript

const data = {
    name: "A",
    nodes: [
        { name: "B", nodes: [{ name: "F" }] },
        { name: "C" },
        {
            name: "D",
            nodes: [
                { name: "G" },
                { name: "H" },
                { name: "I", nodes: [{ name: "J" }, { name: "K" }] }
            ]
        },
        { name: "E" }
    ]
};
function makeTree(roots) {
    function makeNode(node) {
        const $div = $("<div>").text(node.name || "");
        const $li = $("<li>").append($div);
        if (node.nodes && node.nodes.length) {
            $li.append(makeNodeList(node.nodes));
        }
        return $li;
    }
    function makeNodeList(nodes) {
        return nodes
            .map(child => makeNode(child))
            .reduce(($ul, $li) => {
            return $ul.append($li);
        }, $("<ul>"));
    }
    return makeNodeList(roots);
}

makeTree([data]).appendTo($("#tree"));