<ol class="grid grid-cols-1 pt-4 sm:grid-cols-2 lg:grid-cols-4">
  <li class="border-0 lg:border-t">
    <div class="items-center">
      <div class="bg-blue-200 rounded-full -mt-7 h-14 w-14">
        <div class="pt-3 text-2xl font-semibold text-center text-blue-500">1</div>
      </div>
    </div>
    <h2 class="py-3 text-xl font-semibold dark:text-gray-200">Concept</h2>
    <p class="pb-12 pr-10 text-gray-500 dark:text-gray-300">Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nulla vitae elit libero.</p>
  </li>
  <li class="border-0 lg:border-t">
    <div class="items-center">
      <div class="bg-blue-200 rounded-full -mt-7 h-14 w-14">
        <div class="pt-3 text-2xl font-semibold text-center text-blue-500">2</div>
      </div>
    </div>
    <h2 class="py-3 text-xl font-semibold dark:text-gray-200">Plan</h2>
    <p class="pb-12 pr-10 text-gray-500 dark:text-gray-300">Integer posuere erat, consectetur adipiscing elit. Fusce dapibus, tellus ac cursus commodo.</p>
  </li>
  <li class="border-0 lg:border-t">
    <div class="items-center">
      <div class="bg-blue-200 rounded-full -mt-7 h-14 w-14">
        <div class="pt-3 text-2xl font-semibold text-center text-blue-500">3</div>
      </div>
    </div>
    <h2 class="py-3 text-xl font-semibold dark:text-gray-200">Check</h2>
    <p class="pb-12 pr-10 text-gray-500 dark:text-gray-300">Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nulla vitae elit libero.</p>
  </li>
  <li>
    <div class="items-center">
      <div class="bg-blue-200 rounded-full -mt-7 h-14 w-14">
        <div class="pt-3 text-2xl font-semibold text-center text-blue-500">4</div>
      </div>
    </div>
    <h2 class="py-3 text-xl font-semibold dark:text-gray-200">Commit</h2>
    <p class="pb-12 pr-10 text-gray-500 dark:text-gray-300">Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nulla vitae elit libero.</p>
  </li>
</ol>

<div class="block p-4 gap-x-6 lg:flex dark:text-gray-200">
  <div class="w-1/4 pt-4 pb-3 text-sm border-t-4 border-blue-600 lg:0 dark:border-blue-300">
    <p class="font-semibold text-blue-600 uppercase dark:text-blue-300">step 1</p>
    <p class="capitalize">Purchase</p>
  </div>
  <div class="w-1/4 pt-4 pb-3 text-sm border-t-4 border-blue-600 lg:0 dark:border-blue-300">
    <p class="font-semibold text-blue-600 uppercase dark:text-blue-300">step 2</p>
    <p class="capitalize">Confirmation</p>
  </div>
  <div class="w-1/4 pt-4 pb-3 text-sm border-t-4 border-gray-300 lg:0">
    <p class="font-semibold text-gray-600 uppercase dark:text-white">step 3</p>
    <p class="capitalize">Shipping</p>
  </div>
  <div class="w-1/4 pt-4 pb-3 text-sm border-t-4 border-gray-300 lg:0">
    <p class="font-semibold text-gray-600 uppercase dark:text-white">step 4</p>
    <p class="capitalize">Completed</p>
  </div>
</div>

<ul class="text-gray-500 dark:text-gray-200">
  <li class="flex items-center mb-3">
    <svg fill="rgb(59 130 246)" class="h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1.959 17l-4.5-4.319 1.395-1.435 3.08 2.937 7.021-7.183 1.422 1.409-8.418 8.591z" /></svg>
    <p class="ml-4">Basket</p>
  </li>
  <li class="flex items-center mb-3">
    <span class="w-2 h-2 mx-2 bg-blue-500 rounded-full"></span>
    <p class="ml-4 text-blue-500">Billing</p>
  </li>
  <li class="flex items-center mb-3">
    <span class="w-2 h-2 mx-2 bg-gray-300 rounded-full"></span>
    <p class="ml-4">Delivery</p>
  </li>
  <li class="flex items-center mb-3">
    <span class="w-2 h-2 mx-2 bg-gray-300 rounded-full"></span>
    <p class="ml-4">Payment</p>
  </li>
  <li class="flex items-center mb-3">
    <span class="w-2 h-2 mx-2 bg-gray-300 rounded-full"></span>
    <p class="ml-4">Confirmation</p>
  </li>
</ul>

<div class="max-w-md">
  <ol>
    <li class="flex pb-5 border-l-2 border-gray-200">
      <div class="w-10 h-10 -ml-5 bg-blue-200 rounded-full">
        <div class="mt-2 text-center text-blue-600">1</div>
      </div>
      <div class="w-full pl-4">
        <h2 class="mt-2 font-semibold text-blue-600">PREPARE</h2>
        <div class="py-4 text-gray-500">Bacon ipsum dolor amet filet mignon jowl sirloin alcatra short loin, drumstick boudin meatloaf rump.</div>
      </div>
    </li>
    <li class="flex pb-5 border-l-2 border-gray-200">
      <div class="w-10 h-10 -ml-5 bg-blue-200 rounded-full">
        <div class="mt-2 text-center text-blue-600">2</div>
      </div>
      <div class="w-full pl-4">
        <h2 class="mt-2 font-semibold text-blue-600">CHECK</h2>
        <div class="py-4 text-gray-500">Cow prosciutto tri-tip, pork chop shoulder pastrami flank.</div>
      </div>
    </li>
    <li class="flex pb-5">
      <div class="w-10 h-10 -ml-5 bg-blue-200 rounded-full">
        <div class="mt-2 text-center text-blue-600">3</div>
      </div>
      <div class="w-full pl-4">
        <h2 class="mt-2 font-semibold text-blue-600">COMMIT</h2>
        <div class="py-4 text-gray-500">Bacon ipsum dolor amet filet mignon jowl sirloin alcatra short loin, drumstick boudin meatloaf rump.</div>
      </div>
    </li>
  </ol>
</div>