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

5.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

9k
Stepper example
Explain How it works to your audience

Author:
Santos78

2 years ago

14.4k
Tailwind stepper example

Author:
Erik Hyatt

2 years ago

11k
Steps block

Author:
Ron Hicks

2 years ago

11.9k
Responsive steps section

Author:
Simon Scheffer

2 years ago

9k
Stepper block
A full-width steps section

Author:
Ron Hicks

2 years ago

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

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

1 year ago

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

Author:
Komal Jain

1 year ago

9k
Steps / Service Card

Author:
Anonymous

1 year ago

5.6k
Steps section verticle

Author:
Ron Hicks

2 years ago

9.6k
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

7 months ago

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

Author:
ReddRadar.com

3 months ago

139

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components