JSFiddle - React, Tailwind, and code Playground

by Lepetere

HTML

<ol>
  <li>
    <a href="#Lnk">foo</a>
  </li>
  <li>
    <a href="#Lnk">bar</a>
    <ol>
      <li>
        <a href="#Lnk">baz</a>
      </li>
      <li>
        <a href="#Lnk">qux</a>
      </li>
    </ol>
  </li>
  <li>
    <a href="#Lnk">alpha</a>
    <ol>
      <li>
        <a href="#Lnk">beta</a>
      </li>
      <li>
        <a href="#Lnk">gamma</a>
      </li>
    </ol>
  </li>
</ol>

CSS

ol {
    counter-reset: item;
}
li {
    display: block;
}
li::before {
    content: counters(item, ".")". ";
    counter-increment: item;
}