JSFiddle - React, Tailwind, and code Playground

HTML

<ol class="steps">
    <li class="step1 current"><span>Shipping</span></li>
    <li class="step2"><span>Payment</span></li>
</ol>

SCSS

ol.steps {
    $line_height: 20px;
    $padding: 9px;
    $arrow_size: ($line_height + 2 * $padding)/2;
    $max_li: 10;
    
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', 'Bitstream Vera Sans', 'Liberation Sans', Verdana, 'Verdana Ref', sans-serif;
    font-size: 13px;
    line-height: $line_height;
    font-weight: bold;
    counter-reset: li;
    
    li {
        list-style-image: none;
        list-style-type: none;
        margin-left: 0;
        text-align: center;
        color: #3a3a3a;
        background: #dae4eb;
        position: relative;
        
        // Appended arrow.
        &:after {
            position: absolute;
            top: 50%;
            left: 100%;
            content: " ";
            height: 0;
            width: 0;
            pointer-events: none;
            border: solid transparent;
            border-left-color: #dae4eb;
            border-width: $arrow_size;
            margin-top: -$arrow_size;
        }

        span {
            display: block;
            padding: $padding; // moved from LI element

            // "X)" numbering
            &:before {
                content: counter(li) ") ";
                counter-increment: li;
            }
        }
    }

    & > li {
        float: left;
    }
    
    li.current {
        color: #fff;
        background: #7b7b7b;

        // Appended arrow.
        &:after {
          border-left-color: #7b7b7b;
        }
    }

    // For the overlapping to work, later LIs must have a lower z-index.
    @for $i from 1 through $max_li {
        li.step#{$i} {
            z-index: $max_li - $i;
        }
    }
}