JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <ul>
        <li>Lorem
        <ul>
            <li>Lorem
            <ul>
                <li>Lorem</li>
                <li>Lorem
                    <ul>
                        <li>Lorem
                            <ul>
                                <li>Lorem</li>
                                <li>Lorem
                                    <ul>
                                        <li>Lorem</li>
                                        <li>Lorem
                                            <ul>
                                                <li>Lorem</li>
                                                <li>Lorem</li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li>Lorem
                            <ul>
                                <li>Lorem</li>
                                <li>Lorem</li>
                            </ul>
                        </li>
                    </ul>                        
                </li>
                <li>Lorem
                    <ul>
                        <li>Lorem
                            <ul>
                                <li>Lorem</li>
                                <li>Lorem
                                    <ul>
                                        <li>Lorem</li>
                                        <li>Lorem</li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li>Lorem
                            <ul>
                                <li>Lorem</li>
                                <li>Lorem</li>
                            </ul>
                        </li>
                    </ul>                        
                </li>
            </ul>...

CSS

/*1*/
div ul{
    list-style-type:upper-alpha;
}
/*2*/
div ul ul{
    list-style-type:upper-roman;
}
/*3*/
div ul ul ul{
    list-style-type:decimal;
}
/*4*/
div ul ul ul ul{
    list-style:none;
}
div ul ul ul ul>li:before{
    content: counter(section, lower-alpha) ") ";}
div ul ul ul ul>li {
    counter-increment: section;
}
/*5*/
div ul ul ul ul ul{
    list-style:none;
}
div ul ul ul ul ul>li:before{
    content: counter(sectionU, lower-alpha) counter(sectionU, lower-alpha) ") ";}
div ul ul ul ul ul>li {
    counter-increment: sectionU;
}
/*6*/
div ul ul ul ul ul ul{
    list-style:none;
}
div ul ul ul ul ul ul>li:before{
    content: "(" counter(sectionUU, decimal) ") ";}
div ul ul ul ul ul ul>li {
    counter-increment: sectionUU;
}
/*7*/
div ul ul ul ul ul ul ul{
    list-style:none;
}
div ul ul ul ul ul ul ul>li:before{
    content: counter(sectionUUU, lower-greek) ") ";}
div ul ul ul ul ul ul ul>li {
    counter-increment: sectionUUU;
}