JSFiddle - React, Tailwind, and code Playground

HTML

https://jsfiddle.net/jvxpefkL/18/#run

CSS

div {
  padding: 5px;
  border: 1px solid black;
  margin: 5px;
  position: relative;
}
div:before {
  content: '*';
  position: absolute;
  left: -20px;
  font-size: 20px;
}
.level1 {
  margin-left: 30px;
}
.level2 {
  margin-left: 60px;
}
.level3 {
  margin-left: 90px;
}
.level4 {
  margin-left: 120px;
}

.line {
  position: absolute;
  border-left: 1px dotted black;
  left: -45px;
  top: -20px;
}

.line:before {
  content: '';
  position: absolute;
  border-bottom: 1px dotted black;
  width: 25px;
  bottom: 0;
  left: 0;
}

.level1 .line {
  display: none;
}

JavaScript

let tree = [
  {name: 'Tree element 1', level: 1, children: [
		{name: 'Tree element 2', level: 2, children: [
    	{name: 'Tree element 3', level: 3, children: [
      	{name: 'Tree element 4', level: 4},
        {name: 'Tree element 4.1', level: 4}
      ]},
      {name: 'Tree element 5', level: 3, children: [
      	{name: 'Tree element 6', level: 4},
        {name: 'Tree element 7', level: 4},
        {name: 'Tree element 8', level: 4}
      ]}
    ]},
    {name: 'Tree element 9', level: 2, children: [
  	{name: 'Tree element 10', level: 3}
  ]}
  ]}
  
];

const elements = [];

expandAll = () => {

	// розраховуємо висоту лінії для кожного елементу
  tree.forEach(element => {
  	addRecursively(element);
  });
  
  // малюємо лінії
  elements.forEach(elem => {
  	const div = document.createElement('div');
    div.classList.add(`level${elem.level}`, 'leaf');
    div.innerText = elem.name;
    const line = document.createElement('span');
    line.style.height = elem.lineHeightMultiplier * 34 + 'px';
    line.style.top = -(elem.lineHeightMultiplier * 34 - 12) + 'px';
    line.classList.add('line');
    div.appendChild(line);
    document.body.appendChild(div);
  });
};

/*
	element - деякий елемент дерева
*/
addRecursively = element => {
	elements.push(element); // додаємо елемент до масиву, що буде містити всі елементи
  element.lineHeightMultiplier = 1; // змінна, що являє собою множник для лінії. 1 - висота 1 елемента, 2 - висота двох елементів.
  if (element.children && element.children.length) {
    	element.children.forEach(elem => {
      addRecursively(elem);
    });
  }
}

expandAll();