JSFiddle - React, Tailwind, and code Playground

by whelkaholism

HTML

<span class="tn">
  <span class="tn"><label>1</label></span>
  <span class="tn">
    <label>2</label>
    <span class="tn"><label>2.1</label></span>
    <span class="tn"><label>2.2</label></span>
    <span class="tn">
      <label>2.3</label>
      <span class="tn"><label>2.3.1</label></span>
      <span class="tn"><label>2.3.2</label></span>
    </span>
  </span>
  <span class="tn"><label>3</label></span>
</span>

CSS

.tn {
  display: block;
  line-height: 1em;
}

.tn label {
  display: inline-block;
  line-height: 1em;
}

.tn > .tn {
  margin-left: 1em;
}

.tn > .tn:before {
  display: inline-block;
  content: ' ';
  height: 1em;
  width: 0.5em;
  border-right: 1px solid #000000;
}

.tn > .tn:first-child:before {
}
}