JSFiddle - React, Tailwind, and code Playground

by alexche8

HTML

<ol class="nested-1">
    <li>First           
        <ol class="inner-nested-1-15-one">
            <li>First</li>
            <li>Second</li>
            <li>Third</li>
        </ol>
    </li>
    <li>Second</li>
    <li>Third</li>
</ol>

CSS

.nested-1 {
  counter-reset: nested-1;
}

.nested-1 > li {
  list-style-type: none;
}

.nested-1 > li:before {
  counter-increment: nested-1;
  content: '1.' counter(nested-1) " ";
}


.nested-2 {
  counter-reset: nested-2;
}

.nested-2 > li {
  list-style-type: none;
}

.nested-2 > li:before {
  counter-increment: nested-2;
  content: '2.' counter(nested-2) " ";
}


.inner-nested-1-15-one {
  counter-reset: inner-nested-1-15-one;
}

.inner-nested-1-15-one > li {
  list-style-type: none;
}

.inner-nested-1-15-one > li:before {
  counter-increment: inner-nested-1-15-one;
  content: '1.1.' counter(inner-nested-1-15-one) " ";
}


.inner-nested-2-15-one {
  counter-reset: inner-nested-2-15-one;
}

.inner-nested-2-15-one > li {
  list-style-type: none;
}

.inner-nested-2-15-one > li:before {
  counter-increment: inner-nested-2-15-one;
  content: '2.1.' counter(inner-nested-2-15-one) " ";
}