JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <p class="numercal">Demo Text here</p>
    <p class="numercal-no">Sub Text here</p>
    <p class="numercal-no">Sub Text here</p>
    <p class="numercal-no">Sub Text here</p>
    <p class="numercal-no">Sub Text here</p>
    <p class="numercal-no">Sub Text here</p>
    <p class="numercal-no">Sub Text here</p>
</div>


<div>
    <p class="numercal">Demo Text here</p>
    <p class="numercal-no">Sub Text here</p>
    <p class="numercal-no">Sub Text here</p>
    <p class="numercal-no">Sub Text here</p>
    <p class="numercal-no">Sub Text here</p>
    <p class="numercal-no">Sub Text here</p>
    <p class="numercal-no">Sub Text here</p>
</div>




<div>
    <p class="numercal">Demo Text here</p>
    <p class="numercal-no">Sub Text here</p>
    <p class="numercal-no">Sub Text here</p>
    <p class="numercal-no">Sub Text here</p>
    <p class="numercal-no">Sub Text here</p>
    <p class="numercal-no">Sub Text here</p>
    <p class="numercal-no">Sub Text here</p>
</div>

CSS

body{
    counter-reset:section;
}
div{
    margin-top:10px;
    margin-left:10px;
}
.numercal {
    counter-reset:subsection;
    font-weight:bold;
}
.numercal:before{
    counter-increment:section;
    content:counter(section);
    font-style:italic;
    color:red;
}
.numercal-no:before{
    counter-increment:subsection;
    content:counter(section) "." counter(subsection) " ";
}