JSFiddle - React, Tailwind, and code Playground

HTML

<ol>
  <li>List item one</li>
  <li>List item two with subitems:
    <ol>
      <li>Subitem</li>
      <li>Subitem</li>
      <li>Subitem
        <ol>
          <li>Subitem</li>
          <li>Subitem</li>
          <li>Subitem</li>
          <li>Subitem</li>
        </ol>
      </li>
      <li>Subitem</li>
    </ol>
  </li>
  <li>Final list item</li>
  <li>Four</li>
  <li>Five
    <ol>
      <li>Inner One</li>
      <li>inner Two</li>
    </ol>
  </li>
  <li>Six</li>
</ol>

CSS

ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}

ol > li {
  display: table;
  counter-increment: item;
  margin-bottom: 0.6em;
}

ol > li:before {
  content: counters(item, ".") ") ";
  display: table-cell;
  padding-right: 0.6em;
}

li ol > li {
  margin: 0;
}

li ol > li:before {
  content: counters(item, ".") ") ";
}