JSFiddle - React, Tailwind, and code Playground

HTML

<html>
 <head>
  <style>
   OL { counter-reset: item }
   LI { display: block }
   LI:before { content: counters(item, ".") " "; counter-increment: item }
  </style>
 </head>
 <body>
 <ol>
  <li>one</li>
  <li>two</li>
  <ol>
   <li>two.one</li>
   <li>two.two</li>
   <li>two.three</li>
  </ol>
  <li>three</li>  
  <ol>
   <li>three.one</li>
   <li>three.two</li>
    <ol>
     <li>three.two.one</li>
     <li>three.two.two</li>
    </ol>
   </ol>
  <li>four</li>
  </ol>
 </body>
</html>

CSS

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