JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    
    <body>
        <ol class="roman">
            <li>
                <ol class="alpha">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ol>
            </li>
            <li></li>
            <li>
                <ol class="alpha">
                    <li></li>
                    <li></li>
                </ol>
            </li>
        </ol>
    </body>

</html>

CSS

ol.roman {
    counter-reset: roman;
}
ol.alpha {
    counter-reset: alpha
}
ol li {
    list-style: none;
    position: relative;
}
ol.roman > li:before {
    counter-increment: roman;
    content:"(" counter(roman, lower-roman)") "
}
ol.alpha > li:before {
    counter-increment: alpha;
    content:"(" counter(alpha, lower-alpha)") "
}