JSFiddle - React, Tailwind, and code Playground

HTML

<ol class="toc">
    <li>This is the first li
        <ol>
            <li>Some text here</li>
            <li>Some text here
                <ol>
                    <li>Sub-sub list</li>
                    <li>Sub-sub list</li>
                    <li>Sub-sub list
                        <ol>
                            <li>It's lists all the way down...</li>
                        </ol>
                    </li>
                </ol>
            </li>
            <li>Some text here</li>
            <li>Some text here</li>
        </ol>
    </li>
    <li>This is the second li
        <ol>
            <li>Some text here
                <ol>
                    <li>Sub-sub list
                        <ol>
                            <li>More text</li>
                            <li>More text</li>
                        </ol>
                    </li>
                    <li>Sub-sub list</li>
                </ol>
            </li>
            <li>Some text here
                <ol>
                    <li>Sub-sub list</li>
                </ol>
            </li>
            <li>Some text here</li>
            <li>Some text here</li>
        </ol>
    </li>
</ol>

CSS

ol.toc, ol.toc ol { counter-reset: item; }
ol.toc li { display: block; }
ol.toc li:before {
    content: counters(item, ".") ". ";
    counter-increment: item;
} 
ol>li { font-weight:bold; }
ol>li ol>li { font-weight: normal; }