JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="numeric">
<li>First
    <ul>
        <li>Indent </li>
        <li>Indent </li>
    </ul>
</li>
<li>Second
    <ul>
        <li>Indent</li>
        <li>Indent</li>
    </ul>
</li>
<li>Third
        <ul>
            <li>Indent</li>
            <li>Indent</li>
            <li>Indent</li>
             <li>Indent</li>
        </ul>
    </li>
<li>Fourth
    <ul>
        <li>Indent</li>
        <li>Indent</li>
    </ul>
</li>
<li>Five</li>

CSS

ul.numeric { counter-reset:section; list-style-type:none; }
ul.numeric li { list-style-type:none; }
ul.numeric li ul { counter-reset:subsection; }
ul.numeric li:before{
    counter-increment:section;
    content:counter(section) ". ";
}
ul.numeric li ul li:before {
    counter-increment:subsection;
    content:counter(section) "." counter(subsection) " ";
}