JSFiddle - React, Tailwind, and code Playground

by borayeris

HTML

<ul class="moving-steps">
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ul>

CSS

.moving-steps {
    counter-reset: headings;
}
.moving-steps > li:before {
    background: none repeat scroll 0 0 #8F8888;
    border-radius: 15px;
    color: #FFFFFF;
    counter-increment: headings;
    content: counter(headings, decimal); 
    display: block;
    float: left;
    font-size: 16px;
    font-weight: bold;
    height: 25px;
    line-height: 26px;
    margin-bottom: 0;
    margin-right: 5px;
    text-indent: 8px;
    width: 25px;
}