JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <ol>
        <h2 class="title">Section 1</h2> 
        <li class="heading">Heading 1</li>

        <ol class="bullet">
            <li>text 1 one</li>
            <li>text 1 two</li>
            <li>text 1 three</li>
            <li>text 1 four</li>
        </ol> 
        <li class="heading">Heading 2</li>

        <ol class="bullet">
            <li class="roman">Item 1</li>
            <li class="roman">Item 2</li>
            <li class="roman">Item 3</li>
        </ol>
        <h2 class="title">Section 2</h2>
        <ol class="bullet">
            <li>First item
                <ol>
                    <li class="s2sub">First subitem</li>
                    <li class="s2sub">Second subitem</li>
                </ol>
            </li>
            <li>Second Item</li>
            <li>Third Item</li>
        </ol>
        <h2 class="title">Section 3</h2>
        <ol class="bullet">
            <li>First item
                <ol>
                    <li class="s3sub">First subitem</li>
                    <li class="s3sub">Second subitem</li>
                </ol>
            </li>
            <li>Second item</li>
            <li>Third item</li>
        </ol>
    </ol>
</body>

CSS

h2.title {
     font-size: 20px;
     font-weight: 800;
     padding: 12px;
     counter-increment: ordem;
 }

li.heading {
     font-size: 16px;
     font-weight: bold;
     padding: 12px;
    list-style-type:none;
 }


 .bullet {
     counter-reset: bullet;
     padding-left: 12px;
 }
 .bullet li {
     list-style-type: none;
    
 }
 .bullet li:before {
     counter-increment: bullet;
     content: counter(ordem)"." counter(bullet)" ";
 }
 ol.none {
     list-style:none!important
 }
li.s2sub::before {
     counter-increment:none!important;
    content:none!important;
 }
 li.s2sub {
     list-style:upper-alpha;
 }
 li.s3sub::before {
     counter-increment:none!important;
    content:none!important;
 }
 li.s3sub {
     list-style-type:circle;
 }
li.roman::before {
     counter-increment:none!important;
    content:none!important;
 }
 li.roman {
     list-style:lower-roman inside;

 }