JSFiddle - React, Tailwind, and code Playground

by John Doe

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss-browser/4.1.13/index.global.js"></script>
<ol class="flex items-center w-full text-sm font-medium text-center">
    
    <!-- Step 1 - completed -->
    <li class="flex md:w-full items-center text-[#4CA750]
        after:content-[''] after:w-full after:h-1 after:border-b after:border-[#4CA750] after:border-3 after:inline-block">
        
        <div class="flex flex-col items-center">
            <span class="flex items-center justify-center w-8 h-8 bg-[#4CA750] text-white rounded-full">
                1
            </span>
            <span class="mt-2 text-[#4CA750]">Kosár</span>
        </div>

    </li>

    <!-- Step 2 - active -->
    <li class="flex md:w-full items-center text-[#4CA750] 
        after:content-[''] after:w-full after:h-1 after:border-b after:border-gray-300 after:border-3 after:inline-block">
        
        <div class="flex flex-col items-center">
            <span class="flex items-center justify-center w-8 h-8 bg-[#4CA750] text-white rounded-full">
                2
            </span>
            <span class="mt-2 text-[#4CA750]">Szállítás</span>
        </div>

    </li>

    <!-- Step 3 - upcoming -->
    <li class="flex items-center">
        
        <div class="flex flex-col items-center">
            <span class="flex items-center justify-center w-8 h-8 border-2 border-gray-400 text-gray-600 rounded-full">
                3
            </span>
            <span class="mt-2 text-gray-500">Összegzés</span>
        </div>

    </li>

</ol>