JSFiddle - React, Tailwind, and code Playground

HTML

<ol>
    <li class="parent">Section 1
        <ol>
            <li>Item 1</li>
            <li>Item 2</li>
        </ol>
    </li>
    <li class="parent">Section 2
        <ol>
            <li>Item 1</li>
            <li>Item 2</li>
        </ol>
    </li>
    <li class="parent">Section 3
        <ol>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
        </ol>
    </li>

</ol>

CSS

body{
    counter-reset: section children;  
}
li{
    list-style:none;
}
.parent::before {
  counter-increment: section;  
  content: counter(section) " - ";
}
.parent li:first-child{
    counter-reset:children;
}
.parent li::before{
    counter-increment: children;  
    content: counter(section) "." counter(children) " - ";
 }