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 makeTreeWidely(roots) {
    function convert(nodes) {
        const domNodes = nodes
            .map(node => {
            const $li = $("<li>")
                .append($("<div>").text(node.name || ""));
            return {
                node,
                dom: $li
            };
        });
        const $ul = domNodes
            .reduce(($ul, dn) => $ul.append(dn.dom), $("<ul>"));
        return {
            domNodes,
            $ul
        };
    }
    const { domNodes: queue, $ul: $rootUl } = convert(roots);
    while (queue.length) {
        const { node, dom } = queue.shift();
        if (node.nodes && node.nodes.length) {
            const { domNodes, $ul } = convert(node.nodes);
            dom.append($ul);
            queue.push(...domNodes);
        }
    }
    return $rootUl;
}

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