JSFiddle - React, Tailwind, and code Playground
HTML
<ol>
<li>Lorem ipsum.</li>
<li>Excepteur sint occaecat cupidatat non proident:
<ol>
<li>sunt in culpa qui officia,</li>
<li>deserunt mollit anim id est laborum.</li>
</ol>
</li>
<li>Ut enim ad minim veniam.
<ol>
<li>Quis nostrud exercitation.</li>
<li>Ullamco laboris nisi ut.
<ol>
<li>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</li>
<li>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</li>
<li>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</li>
<li>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</li>
<li>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</li>
<li>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</li>
<li>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</li>
<li>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</li>
<li>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</li>
<li>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</li>
<li>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</li>
<li>
Duis aute irure dolor in...
CSS
ol {
display: table;
list-style-type: none;
counter-reset: item;
margin: 0;
padding: 0;
}
li {
display: table-row;
counter-increment: item;
}
li:before {
content: counters(item, ".") ". ";
display: table-cell;
text-align: right;
padding-right: 0.6em;
}
li:after {
content: '';
display: block;
padding-bottom: 0.6em;
}
li li:after {
padding-bottom: 0;
}
li li:before {
content: counters(item, ".") " ";
}