Stepper with Progress Indicator Using Tailwind UI

Stepper with progress indicator is a UI component that combines stepper and progress indicator features created using Tailwind CSS.
steps
Loading component...
index.html
157 lines
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
  href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
  rel="stylesheet">

<style>
  body {
    font-family: 'Plus Jakarta Sans', sans-serif;
  }
</style>


<div class="container mx-auto my-8 space-y-10">

  <h1 class="text-center font-bold text-3xl my-10 text-gray-800">Steps with progress indicator components</h1>
  <div class="py-20 bg-black">
    <div class="flex flex-col md:flex-row flex-wrap items-center justify-center">
      <div class="flex items-center">
        <div
          class="inline-flex w-7 h-7 mr-4 justify-center items-center rounded-full bg-gradient-to-br from-purple-500 via-red-500 to-purple-700 text-sm font-bold text-white">
          1</div>
        <span class="font-bold text-white">Your Details</span>
      </div>
      <span class="my-4 md:my-0 md:mx-4 lg:mx-12">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
          class="w-6 h-6 text-white">
          <path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3" />
        </svg>
      </span>
      <div class="flex items-center">
        <div
          class="inline-flex w-7 h-7 mr-4 justify-center items-center rounded-full bg-blueGray-800 text-sm font-bold text-white">
          2</div>
        <span class="font-bold text-white">choose a password</span>
      </div>
      <span class="my-4 md:my-0 md:mx-4 lg:mx-12">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
          class="w-6 h-6 text-white">
          <path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3" />
        </svg>
      </span>
      <div class="flex items-center">
        <div
          class="inline-flex w-7 h-7 mr-4 justify-center items-center rounded-full bg-blueGray-800 text-sm font-bold text-white">
          3</div>
        <span class="font-bold text-white">Invite your team</span>
      </div>
      <span class="my-4 md:my-0 md:mx-4 lg:mx-12">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
          class="w-6 h-6 text-white">
          <path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3" />
        </svg>
      </span>
      <div class="flex items-center">
        <div
          class="inline-flex w-7 h-7 mr-4 justify-center items-center rounded-full bg-blueGray-800 text-sm font-bold text-white">
          4</div>
        <span class="font-bold text-white">Add your socials</span>
      </div>
    </div>
  </div>

  <div class="py-20 bg-black">
    <div class="flex flex-col md:flex-row flex-wrap items-center justify-center space-y-4 md:space-y-0">
      <div class="flex items-center md:mx-8 lg:mx-16">
        <div
          class="inline-flex w-7 h-7 mr-4 justify-center items-center rounded-full border-2 border-purple-600 text-sm font-bold text-white">
          <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
            stroke="currentColor" class="w-6 h-6">
            <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
          </svg>
        </div>
        <span class="font-bold text-white">Your Details</span>
      </div>

      <div class="flex items-center md:mx-8 lg:mx-16">
        <div
          class="inline-flex w-7 h-7 mr-4 justify-center items-center rounded-full border-2 border-purple-600 text-sm font-bold text-white">
          <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
            stroke="currentColor" class="w-6 h-6">
            <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
          </svg>
        </div>
        <span class="font-bold text-white">choose a password</span>
      </div>

      <div class="flex items-center md:mx-8 lg:mx-16">
        <div
          class="inline-flex w-7 h-7 mr-4 justify-center items-center rounded-full border-2 border-purple-600 text-sm font-bold text-white">
          <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
            stroke="currentColor" class="w-6 h-6">
            <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
          </svg>
        </div>
        <span class="font-bold text-white">Invite your team</span>
      </div>

      <div class="flex items-center md:mx-8 lg:mx-16">
        <div
          class="inline-flex w-7 h-7 mr-4 justify-center items-center rounded-full bg-gradient-to-br from-purple-500 via-red-500 to-purple-700 text-sm font-bold text-white">
          4</div>
        <span class="font-bold text-white">Add your socials</span>
      </div>
    </div>
  </div>

  <div class="py-20 bg-black">
    <div class="flex flex-col md:flex-row flex-wrap items-center justify-center space-y-4 md:space-y-0">
      <div class="flex items-center md:mx-6 lg:mx-10">
        <div
          class="inline-flex w-7 h-7 mr-4 justify-center items-center rounded-full bg-gradient-to-br from-purple-500 via-red-500 to-purple-700 text-sm font-bold text-white">
          <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
            stroke="currentColor" class="w-6 h-6">
            <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
          </svg>
        </div>
        <div class="flex flex-col">
          <span class="font-bold text-white">Your Details</span>
          <span class="font-base text-xs text-white">Please provide your name and email</span>
        </div>

      </div>

      <div class="flex items-center md:mx-6 lg:mx-10">
        <div
          class="inline-flex w-7 h-7 mr-4 justify-center items-center rounded-full bg-gray-600 text-sm font-bold text-white">
          2</div>
        <div class="flex flex-col">
          <span class="font-bold text-white">Choose a password</span>
          <span class="font-base text-xs text-white">Choose a secure password</span>
        </div>
      </div>

      <div class="flex items-center md:mx-6 lg:mx-10">
        <div
          class="inline-flex w-7 h-7 mr-4 justify-center items-center rounded-full bg-gray-600 text-sm font-bold text-white">
          3</div>
        <div class="flex flex-col">
          <span class="font-bold text-white">Invite your team</span>
          <span class="font-base text-xs text-white">Start colaborating with your team</span>
        </div>
      </div>

      <div class="flex items-center md:mx-6 lg:mx-10">
        <div
          class="inline-flex w-7 h-7 mr-4 justify-center items-center rounded-full bg-gray-600 text-sm font-bold text-white">
          4</div>
        <div class="flex flex-col">
          <span class="font-bold text-white">Add your socials</span>
          <span class="font-base text-xs text-white">Share post to your social accounts</span>
        </div>
      </div>
    </div>
  </div>

</div>
Stepper with Progress Indicator Using Tailwind UI

Preview - Stepper with Progress Indicator Using Tailwind UI
