Onboarding steps section

This tailwind example is contributed by Prashant, on 28-Nov-2023. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example is stepper

Steps

Author Prashant

Tailwind v3.4 6.5k 17

Fork Fullscreen

<div class="bg-indigo-800 dark:bg-gray-800 py-16 mt-16">
  <div class="mx-auto max-w-7xl px-6 lg:px-8">
    <div class="mx-auto max-w-7xl sm:text-center mb-14">
      <p class="mt-2 text-3xl font-bold tracking-tight text-white sm:text-4xl">Effortless Integration</p>
      <p class="mt-2 text-lg sm:text-center leading-8 text-gray-300">Experience seamless integration with our platform. If you encounter any issues with the integration process, <a class="text-custom-primary font-medium" target="_blank" href="https://app.example-service.io/demo">watch a demonstration here</a> or contact our <a class="text-custom-primary font-medium" href="mailto:support@example-service.io">support team</a>.</p>
    </div>
    <div class="mx-auto grid max-w-2xl grid-cols-1 gap-8 overflow-hidden lg:mx-0 lg:max-w-none lg:grid-cols-4">
      <div>
        <div class="flex items-center text-sm font-semibold leading-6 text-blue-400">
          <svg viewBox="0 0 4 4" class="mr-4 h-1 w-1 flex-none" aria-hidden="true">
            <circle cx="2" cy="2" r="2" fill="currentColor"></circle>
          </svg>
          Step 1
          <div class="absolute -ml-2 h-px w-screen -translate-x-full bg-gray-500/80 sm:-ml-4 lg:static lg:-mr-6 lg:ml-8 lg:w-auto lg:flex-auto lg:translate-x-0" aria-hidden="true"></div>
        </div>
        <p class="mt-6 text-lg font-semibold leading-8 tracking-wide text-white">Create an Account:</p>
        <p class="mt-1 text-base leading-7 text-gray-300 dark:text-gray-400">Get started by registering for an account. No complex onboarding processes.</p>
      </div>
      <div>
        <div class="flex items-center text-sm font-semibold leading-6 text-blue-400">
          <svg viewBox="0 0 4 4" class="mr-4 h-1 w-1 flex-none" aria-hidden="true">
            <circle cx="2" cy="2" r="2" fill="currentColor"></circle>
          </svg>
          Step 2
          <div class="absolute -ml-2 h-px w-screen -translate-x-full bg-gray-500/80 sm:-ml-4 lg:static lg:-mr-6 lg:ml-8 lg:w-auto lg:flex-auto lg:translate-x-0" aria-hidden="true"></div>
        </div>
        <p class="mt-6 text-lg font-semibold leading-8 tracking-wide text-white">Choose Features:</p>
        <p class="mt-1 text-base leading-7 text-gray-300 dark:text-gray-400">Select from a variety of features and functionalities tailored to your needs.</p>
      </div>
      <div>
        <div class="flex items-center text-sm font-semibold leading-6 text-blue-400">
          <svg viewBox="0 0 4 4" class="mr-4 h-1 w-1 flex-none" aria-hidden="true">
            <circle cx="2" cy="2" r="2" fill="currentColor"></circle>
          </svg>
          Step 3
          <div class="absolute -ml-2 h-px w-screen -translate-x-full bg-gray-500/80 sm:-ml-4 lg:static lg:-mr-6 lg:ml-8 lg:w-auto lg:flex-auto lg:translate-x-0" aria-hidden="true"></div>
        </div>
        <p class="mt-6 text-lg font-semibold leading-8 tracking-wide text-white">Customize Settings:</p>
        <p class="mt-1 text-base leading-7 text-gray-300 dark:text-gray-400">Tailor the platform to your preferences. Define settings, alerts, and integrations.</p>
      </div>
      <div>
        <div class="flex items-center text-sm font-semibold leading-6 text-blue-400">
          <svg viewBox="0 0 4 4" class="mr-4 h-1 w-1 flex-none" aria-hidden="true">
            <circle cx="2" cy="2" r="2" fill="currentColor"></circle>
          </svg>
          Step 4
          <div class="absolute -ml-2 h-px w-screen -translate-x-full bg-gray-500/80 sm:-ml-4 lg:static lg:-mr-6 lg:ml-8 lg:w-auto lg:flex-auto lg:translate-x-0" aria-hidden="true"></div>
        </div>
        <p class="mt-6 text-lg font-semibold leading-8 tracking-wide text-white">Activate and Explore:</p>
        <p class="mt-1 text-base leading-7 text-gray-300 dark:text-gray-400">Activate your account and start exploring the possibilities of our platform.</p>
      </div>
    </div>
  </div>
</div>

Related Examples

Steps section for explaining process
Step component with a curved line connecting all steps

Anonymous

2 years ago

10.7k
Stepper example
Explain How it works to your audience

Santos78

3 years ago

15.8k
Tailwind stepper example

Erik Hyatt

3 years ago

11.9k
Steps block

Ron Hicks

3 years ago

13.1k
Responsive steps section

Simon Scheffer

3 years ago

10.2k
House Cleaning Website Services Section
House Cleaning Website Services Section Photo by @candjstudios & @framesforyourheart on Unsplash

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

8.2k
Stepper block
A full-width steps section

Ron Hicks

3 years ago

13k
Steps / Service Card

Anonymous

2 years ago

6.8k
Steps section
Show features or steps of your website. Each step Includes Icons.

Komal Jain

2 years ago

10.4k
Steps section verticle

Ron Hicks

3 years ago

10.5k
Loading Stepper

Cristian

1 year ago

2.3k
Clean How to Use Section
Minimal how to use guide section

ReddRadar.com

1 year ago

654