[ Component ]
Checkout Flow

· checkout· stepper
Copy as
HTML
JSX
            <div class="flex justify-center items-center bg-gray-100 w-full min-h-screen text-gray-800">
  <div class="rounded-2xl bg-white shadow-md w-10/12 p-6 grid grid-cols-4 gap-2">
    <div>
      <div class="flex items-center mb-4">
        <div class="p-1 rounded-full bg-green-500 inline-block text-white"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z" />
          </svg></div>
        <div class="ml-2 flex-1 rounded-full h-1 bg-gray-100 relative">
          <div class="absolute w-full bg-green-500 h-full rounded"></div>
        </div>
      </div>
      <p class="text-xs text-gray-400">Step 1</p>
      <div class="font-bold mb-1">Delivery</div>
      <div class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-700 inline-block">Completed</div>
    </div>
    <div>
      <div class="flex items-center mb-4">
        <div class="p-1 rounded-full bg-green-500 inline-block text-white"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z" />
          </svg></div>
        <div class="ml-2 flex-1 rounded-full h-1 bg-gray-100 relative">
          <div class="absolute w-full bg-green-500 h-full rounded"></div>
        </div>
      </div>
      <p class="text-xs text-gray-400">Step 2</p>
      <div class="font-bold mb-1">Card details</div>
      <div class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-700 inline-block">Completed</div>
    </div>
    <div>
      <div class="flex items-center mb-4">
        <div class="p-1 rounded-full bg-blue-500 inline-block text-white"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z" />
          </svg></div>
        <div class="ml-2 flex-1 rounded-full h-1 bg-gray-100 relative">
          <div class="absolute w-6/12 bg-blue-500 h-full rounded"></div>
        </div>
      </div>
      <p class="text-xs text-gray-400">Step 3</p>
      <div class="font-bold mb-1">Review</div>
      <div class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-700 inline-block">In Progress</div>
    </div>
    <div>
      <div class="flex items-center mb-4">
        <div class="p-1 rounded-full bg-gray-200 inline-block text-white"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z" />
          </svg></div>
        <div class="ml-2 flex-1 rounded-full h-1 bg-gray-100 relative hidden">
          <div class="absolute w-full bg-green-500 h-full rounded"></div>
        </div>
      </div>
      <p class="text-xs text-gray-400">Step 4</p>
      <div class="font-bold mb-1">Confirmation</div>
      <div class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-700 inline-block">Pending</div>
    </div>
  </div>
</div>