JSFiddle - React, Tailwind, and code Playground

HTML

<ol>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>

CSS

ol {
   counter-reset:numbers 0;
}

ol li {
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    width: 16px;
    height: 16px;
    line-height:22px;
    padding: 3px;   
    background: red;
    border: 2px solid black;
    color: white;
    text-align: center;  
    display:inline-block;
    behavior: url(/PIE.htc);      
}
ol li:after {
    counter-increment: numbers;
    content:counter(numbers);
}