JSFiddle - React, Tailwind, and code Playground

HTML

<html>

  <head>
  </head>

  <body>


    <ol>
      <li>one</li>
      <li>two
        <ol>
          <li>two.one</li>
        </ol>
      </li>
    </ol>

    <hr />
    <div>
      <ol>
        <li>one
          <ol>
            <li>one.one</li>
          </ol>
        </li>
      </ol>
    </div>

  </body>

</html>

CSS

OL {
  counter-reset: item;
  padding-left: 10px;
}

LI {
  display: list-item
}

LI:before {
  content: counters(item, ".") " ";
  counter-increment: item
}