JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="demo">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

What it <b>Should</b> look like:<br>
<ul>
    <li>100</li>
    <li>200</li>
    <li>300</li>
    <li>400</li>
    <li>500</li>
</ul>

CSS

.demo {
    counter-reset: list;
}

.demo li:before {
    /* 3) CSS gets data attribute and applies as the increment. Not working :( */
    counter-increment: list attr(data-unit);
    content: counter(list);
}

JavaScript

// 1) User Sets Unit Size
var myUnit = 100;

// 2) Unit size is saved via data attribute
$('.demo li').attr('data-unit', myUnit);

// (head over to the CSS)