Linear Progress Stepper Using Tailwind UI

Linear progress stepper is a UI component that utilizes a linear progress bar to visualize steps in a process, implemented with a design style using Tailwind CSS.
steps
Loading component...
index.html
125 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="font-bold text-3xl my-10 text-center text-gray-800">Linear progress steps components</h1>
  <div class="py-20 bg-black">
    <div class="flex flex-col px-12 w-full md:flex-row flex-wrap items-center justify-center space-y-4 md:space-y-0">
      <div class="flex flex-col w-1/4 px-4">
        <div
          class="bg-gradient-to-r from-yellow-400 to-red-800 border border-solid border-gray-500 h-1.5 rounded-xl w-full mb-2">
        </div>
        <span class="font-medium text-sm text-white">Your Details</span>
      </div>
      <div class="flex flex-col w-1/4 px-4">
        <div
          class="bg-gradient-to-r from-yellow-400 to-red-800 border border-solid border-gray-500 h-1.5 rounded-xl w-full mb-2">
        </div>
        <span class="font-medium text-sm text-white">Choose a password</span>
      </div>
      <div class="flex flex-col w-1/4 px-4">
        <div
          class="bg-gradient-to-r from-yellow-400 to-red-800 border border-solid border-gray-500 h-1.5 rounded-xl w-full mb-2">
        </div>
        <span class="font-medium text-sm text-white">Invite your team</span>
      </div>
      <div class="flex flex-col w-1/4 px-4">
        <div class="border border-solid border-gray-500 h-1.5 rounded-xl w-full mb-2"></div>
        <span class="font-medium text-sm text-white">Add your socials</span>
      </div>

    </div>
  </div>

  <div class="py-20 bg-black">
    <div class="flex flex-col px-12 w-full md:flex-row flex-wrap items-center justify-center space-y-4 md:space-y-0">
      <div class="flex flex-row w-full mb-4">
        <div class="flex flex-col w-1/4 px-4">
          <div
            class="bg-gradient-to-r from-yellow-400 to-red-800 border border-solid border-gray-500 h-1.5 rounded-xl w-full">
          </div>
        </div>
        <div class="flex flex-col w-1/4 px-4">
          <div class="border border-solid border-gray-500 h-1.5 rounded-xl w-full"></div>
        </div>
        <div class="flex flex-col w-1/4 px-4">
          <div class="border border-solid border-gray-500 h-1.5 rounded-xl w-full"></div>
        </div>
        <div class="flex flex-col w-1/4 px-4">
          <div class="border border-solid border-gray-500 h-1.5 rounded-xl w-full"></div>
        </div>
      </div>
      <span class="font-medium text-sm text-white">Your Details</span>
    </div>
  </div>

  <div class="py-12 bg-black">
    <div class="px-16 mb-16">
      <h1 class="text-white font-medium mb-2">Complete your register</h1>
      <p class="text-sm font-light text-gray-200">Don't let this special opportunity pass you by! Complete your
        registration now
        and become
        a part of an unforgettable experience with us.</p>
    </div>
    <div class="flex flex-col px-12 w-full md:flex-row flex-wrap items-center justify-start space-y-4 md:space-y-0">
      <span class="font-base text-xs text-white px-4 mb-2">Step 1 of 4</span>
      <div class="flex flex-row w-full">
        <div class="flex flex-col w-1/4 px-4">
          <div
            class="bg-gradient-to-r from-yellow-400 to-red-800 border border-solid border-gray-500 h-1.5 rounded-xl w-full">
          </div>
        </div>
        <div class="flex flex-col w-1/4 px-4">
          <div class="border border-solid border-gray-500 h-1.5 rounded-xl w-full"></div>
        </div>
        <div class="flex flex-col w-1/4 px-4">
          <div class="border border-solid border-gray-500 h-1.5 rounded-xl w-full"></div>
        </div>
        <div class="flex flex-col w-1/4 px-4">
          <div class="border border-solid border-gray-500 h-1.5 rounded-xl w-full"></div>
        </div>
      </div>
    </div>
  </div>

  <div class="py-12 bg-black">
    <div class="px-16 mb-16">
      <h1 class="text-white font-medium mb-2">Complete your register</h1>
    </div>
    <div class="flex flex-col px-12 w-full md:flex-row flex-wrap items-center justify-center space-y-4 md:space-y-0">
      <div class="flex flex-col w-1/4 px-4">
        <div
          class="bg-gradient-to-r from-yellow-400 to-red-800 border border-solid border-gray-500 h-1.5 rounded-xl w-full mb-2">
        </div>
        <span class="font-medium text-sm text-white">1. Your Details</span>
      </div>
      <div class="flex flex-col w-1/4 px-4">
        <div
          class="bg-gradient-to-r from-yellow-400 to-red-800 border border-solid border-gray-500 h-1.5 rounded-xl w-full mb-2">
        </div>
        <span class="font-medium text-sm text-white">2. Choose a password</span>
      </div>
      <div class="flex flex-col w-1/4 px-4">
        <div
          class="bg-gradient-to-r from-yellow-400 to-red-800 border border-solid border-gray-500 h-1.5 rounded-xl w-full mb-2">
        </div>
        <span class="font-medium text-sm text-white">3. Invite your team</span>
      </div>
      <div class="flex flex-col w-1/4 px-4">
        <div class="border border-solid border-gray-500 h-1.5 rounded-xl w-full mb-2"></div>
        <span class="font-medium text-sm text-white">4. Add your socials</span>
      </div>

    </div>
  </div>
</div>
Linear Progress Stepper Using Tailwind UI

Preview - Linear Progress Stepper Using Tailwind UI
