JSFiddle - React, Tailwind, and code Playground

HTML

<ol class="mainList">
    <li>
        <ol>
            <li></li>
            <li></li>
            <li></li>
        <ol>  
    </li>
    <li>
        <ol>
            <li>
              <ol>
                <li></li>
                <li></li>
                <li></li>
              <ol>
            </li>
            <li>
              <ol>
                <li></li>
                <li></li>
                <li></li>
              <ol>
            </li>
            <li></li>
        <ol>  
    </li>
    <li>
        <ol>
            <li></li>
            <li></li>
            <li></li>
        <ol>  
    </li>
<ol>

CSS

.mainList
{
counter-reset:section;
list-style-type: none;
}

.mainList > li > ol
{
counter-reset:sub1;
padding-left: 5px;
}

.mainList > li > ol > li > ol
{
counter-reset:sub2;
padding-left: 5px;
}


.mainList > li:before {
counter-increment:section;
content: "Section: " counter(section);
    
}

.mainList > li > ol > li:before 
{
content:counter(section) "." counter(sub1) " ";
}

.mainList > li > ol > li > ol > li:before 
{
content:counter(section) "." counter(sub1) "." counter(sub2) " ";
}

.mainList > li > ol > li + li {
counter-increment:sub1; 
}

.mainList > li > ol > li > ol > li + li {
counter-increment:sub2; 
}