JSFiddle - React, Tailwind, and code Playground
HTML
<ol class="chapter">
<li>Apresentacao</li>
<ol class="section">
<li> Conteudo </li>
<li> Programação </li>
<ol class="subsection">
<li> JAVA </li>
<li> DOTNET </li>
</ol>
</ol>
<li>Conclusão</li>
<ol class="section">
<li> Agradecimentos</li>
<ol class="subsection">
<li> Família </li>
<li> Professores </li>
</ol>
</ol>
<li>Fim</li>
</ol>
CSS
body {
counter-reset: chapter;
}
ol {
list-style-type: none;
}
.chapter > li:before {
counter-increment: chapter;
content: counter(chapter)".";
}
ol.section {
counter-reset: section;
}
ol.section > li:before {
content: counter(chapter)"."counter(section)" ";
counter-increment: section;
}
ol.subsection {
counter-reset: subsection;
}
ol.subsection > li:before {
content: counter(chapter)"."counter(section)"."counter(subsection)" ";
counter-increment: subsection;
}