JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.2.1/mustache.js"></script>
<script id="some-template" type="text/x-handlebars-template">
{{#data}}
<h1>{{name}} {{name2}} ({{objclass}})</h1>
  <div class="rowheader">
    {{#labels}}
      <div class="cell">{{name}}</div>
    {{/labels}}
  </div>
  {{#data}}
  <div class="row">
    <div class="cell">{{name}}</div>
  </div>
    {{#children}}
    <div class="row">
      <div class="cell layer2">{{name}}</div>
    </div>
      {{#children}}
      <div class="row">
        <div class="cell layer3">{{name}}</div>
      </div>
      {{/children}}
    {{/children}}
  {{/data}}
{{/data}}
</script>

CSS

.rowheader DIV,
.row DIV
{
  display: inline-block;
}
.cell
{
  width: 10em;
}
.layer2
{
  padding-left: 20px;
  color: blue;
}
.layer3
{
  padding-left: 40px;
  color: red;
}

JavaScript

var template = $("#some-template").html(); 

var data = {
  labels: { name: "Name" },
  data: {
    name: "Layer 1",
    children: [
      {
        name: "Layer 1-1",
        children: [
          { name: "Layer 1-1-2" }
        ]
      },
      {
        name: "Layer 1-2",
        children: [
          { name: "Layer 1-2-1" },
          { name: "Layer 1-2-2" }
        ]
      },
      { name: "Layer 1-3" }
    ],
  }
};

var rendered = Mustache.render(template, data);
document.body.innerHTML = rendered;