JSFiddle - React, Tailwind, and code Playground

HTML

<div id="outer">
    <div></div>
    <div></div>
    <div></div>
</div>

CSS

#outer { counter-reset: c; }
#outer > div:before { content: counter(c); }

.active > div:before { counter-increment: c; }
.inactive > div:before { counter-increment: none; }

JavaScript

outer.className = 'inactive'
outer.offsetTop;
outer.className = 'active'