JSFiddle - React, Tailwind, and code Playground

by arcm111

HTML

<body>
  <div>
    <button onclick="toggle(this)">Dispaly: block</button>
    <button onclick="showTree(0)">Show list</button>
    <button onclick="showTree(1)">Show tree</button>
    <button onclick="showTree(2)">Final tree example</button>
  </div>
  <br/>
  <ul class="table">
    <li id="root"></li>
  </ul>
</body>

CSS

body {
  font-family: arial;
  background: #eee;
  font-size: 12px;
  padding-top: 30px;
}
div {
  position: fixed;
  top: 0;
  padding: 5px;
  background: #eee;
  width: 100%;
  z-index: 100;
}
ul {
  display: table;
  list-style-type: none;
  padding: 0;
  margin: 0;
}
li {
  display: table-cell;
  text-align: center;
  padding: 0;
  margin: 0;
}
p {
  position: relative;
  margin: 0 0 5px 0;
  min-width: 100px;
  padding: 4px 10px 12px;
}
p:before {
  content: "";
  display: block;
  width: 50%;
  height: 10px;
  position: absolute;
  top: -10px;
  left: 50%;
  border-top: 1px solid #000;
  border-left: 1px solid #000;
}
li:last-child>p:before {
  width: 0;
  border-top: none;
  border-left: none;
  border-right: 1px solid #000;
}
p:after {
  content: "";
  display: block;
  width: 50%;
  height: 0px;
  position: absolute;
  top: -10px;
  right: 50%;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
}
li:first-child>p:after {
  width: 0;
  top: 0;
  right: 0;
  border-top: none;
  border-right: none;
}
.table ul {
  display: table;
}
.table li {
  display: table-cell;
}
.block ul {
  display: block;
}
.block li {
  display: inline-block;
}

JavaScript

var root = document.getElementById("root");
var html = root.innerHTML;

function tree(elm, count, depth, branches, rand, nested) {
  var list, ul, li, max, b;
  list = document.createElement('ul');
  elm.appendChild(list);  
  for (var i = 0; i < branches; i++) {
    li = document.createElement('li');
    li.innerHTML = "<p>Item " + (count + 1) + "</p>";
    list.appendChild(li);
    b = (nested) ? branches : 1;
    if (rand) branches = Math.round(Math.random() * branches);
    if (count < depth) tree(li, count + 1, depth, b, rand, nested);
  }
}

tree(root, 0, 50, 1);

function toggle(elm) {
  var display = root.parentElement.className;
  root.parentElement.className = (display == "block") ? "table" : "block";
  elm.innerHTML = "Display: " + display;
}

function showTree(type) {
  root.innerHTML = html;
  if (type == 0) tree(root, 0, 50, 1, 0, 0);
  else if (type == 1) tree(root, 0, 50, 8, 0, 0);
  else if (type == 2) tree(root, 0, 8, 4, 1, 1);
}