Home
Prashant
Onboarding steps section

Onboarding steps section

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

Steps

Author Prashant

4.8k

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

Author:
Anonymous

1 year ago

7.9k
Stepper example
Explain How it works to your audience

Author:
Santos78

1 year ago

13.3k
Tailwind stepper example

Author:
Erik Hyatt

1 year ago

10.3k
Steps block

Author:
Ron Hicks

2 years ago

11.2k
Responsive steps section

Author:
Simon Scheffer

2 years ago

8.4k
Stepper block
A full-width steps section

Author:
Ron Hicks

2 years ago

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

Author:
Samuel Abera

11 months ago

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

Author:
Komal Jain

1 year ago

8.3k
Steps / Service Card

Author:
Anonymous

1 year ago

4.8k
Steps section verticle

Author:
Ron Hicks

2 years ago

9.1k
How it works section with steps
big and bold how it works section with steps

Author:
Carlos

5 months ago

1.2k
stepper
The Stepper Component is a versatile and user-friendly tool designed to guide users through a sequence of steps. Whether you're building a multi-step form, a tutorial, or any process that requires sequential navigation, this component makes it easy to implement and customize.

Author:
Abhiraj

3 weeks ago

265

Explore components by Tags

Didn't find component you were looking for?

Search from 2000+ components