JSFiddle - React, Tailwind, and code Playground

by Daniel Tan

HTML

<ol>
    <li>Item 1</li>
    <li>Item 2
        <ol>
            <li>Item 2a</li>
            <li>Item 2b</li>
        </ol>
    </li>
    <li>Item 3</li>
</ol>

CSS

ol {
    counter-reset: item;
}

ol ol {
    counter-reset: subitem;
}

li {
    display: block;
}

li li {
    margin: 0 1em;
}

li:before {
    content: counter(item, decimal-leading-zero) ' ';
    counter-increment: item;
}

li li:before {
    content: counter(item, decimal-leading-zero) counter(subitem, lower-alpha) ' ';
    counter-increment: subitem;
}