JSFiddle - React, Tailwind, and code Playground

HTML

<section>
    <h1>dsfa dsf</h1>

    
<h1>sadfasdf</h1>

    
<h1></h1>

    
<h1></h1>

    
<h1></h1>

    <ul>
        <li>
            <ul>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </li>
        <li>
            <ul>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </li>
        <li>
            <ul>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </li>
        <li>
            <ul>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </li>
        <li>
            <ul>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </li>
    </ul>
</section>
<section>
    <h1>dsfa dsf</h1>

    
<h1>sadfasdf</h1>

    
<h1></h1>

    
<h1></h1>

    
<h1></h1>

    <ul>
        <li>
            <ul>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </li>
        <li>
            <ul>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </li>
        <li>
            <ul>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </li>
        <li>
            <ul>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </li>
        <li>
            <ul>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </li>
    </ul>
</section>

CSS

section {
    counter-reset: chapter;
}
h1 {
    counter-increment: chapter;
}
h1:before {
    content:counter(chapter, lower-alpha)") ";
}
ul {
    counter-reset: list;
}
ul > li {
    counter-increment:list;
}
ul li:before {
    content:"(Item " counters(list, ".")")";
}