How it works section with steps

big and bold how it works section with steps

This tailwind example is contributed by Carlos, on 21-Sep-2024. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example is stepper

Steps

Author Carlos

Tailwind v3.4 3.7k 3

Fork Fullscreen

<section class="py-20 overflow-hidden bg-gray-100 dark:bg-gray-800">
  <div class="container px-4 mx-auto">
    <div class="max-w-5xl mx-auto">
      <div class="flex flex-wrap items-center -mx-5">
        <div class="w-full lg:w-1/2 px-5 mb-20 lg:mb-0">
          <div class="max-w-md">
            <span class="text-lg font-bold text-blue-600 dark:text-blue-400">Getting Started</span>
            <h2 class="mt-12 mb-10 text-5xl font-extrabold leading-tight text-gray-800 dark:text-gray-200">Launch Your Journey with Ease</h2>
            <p class="mb-16 text-lg text-gray-600 dark:text-gray-400">Download our free mobile app and start building today!</p>
            <a class="inline-block px-12 py-4 text-white font-bold bg-blue-600 hover:bg-blue-700 rounded-full shadow-lg transition duration-200" href="#">Get Started</a>
          </div>
        </div>
        <div class="w-full lg:w-1/2 px-5">
          <ul>
            <li class="flex pb-10 mb-8 border-b border-gray-200 dark:border-gray-700">
              <div class="mr-8">
                <span class="flex justify-center items-center w-14 h-14 bg-blue-200/50 dark:bg-blue-600/30 text-lg font-bold rounded-full text-blue-600 dark:text-blue-300">1</span>
              </div>
              <div class="max-w-xs">
                <h3 class="mb-2 text-lg font-bold text-gray-700 dark:text-gray-300">Create Your Account</h3>
                <p class="text-lg text-gray-500 dark:text-gray-400">Sign up quickly and easily to access our full range of features.</p>
              </div>
            </li>
            <li class="flex pb-10 mb-8 border-b border-gray-200 dark:border-gray-700">
              <div class="mr-8">
                <span class="flex justify-center items-center w-14 h-14 bg-blue-200/50 dark:bg-blue-600/30 text-lg font-bold rounded-full text-blue-600 dark:text-blue-300">2</span>
              </div>
              <div class="max-w-xs">
                <h3 class="mb-2 text-lg font-bold text-gray-700 dark:text-gray-300">Personalize Your Experience</h3>
                <p class="text-lg text-gray-500 dark:text-gray-400">Tailor tools and settings to fit your needs and preferences.</p>
              </div>
            </li>
            <li class="flex pb-10 border-b border-gray-200 dark:border-gray-700">
              <div class="mr-8">
                <span class="flex justify-center items-center w-14 h-14 bg-blue-200/50 dark:bg-blue-600/30 text-lg font-bold rounded-full text-blue-600 dark:text-blue-300">3</span>
              </div>
              <div class="max-w-xs">
                <h3 class="mb-2 text-lg font-bold text-gray-700 dark:text-gray-300">Collaborate with Your Team</h3>
                <p class="text-lg text-gray-500 dark:text-gray-400">Seamlessly work together, sharing insights and tools for better productivity.</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>

Related Examples

Responsive Multi-Step Registration Form with Progress Stepper

JUGENDRA GANGWAR

1 month ago

99
Responsive steps section

Simon Scheffer

3 years ago

10.2k
Steps section for form
with short description

Yuni saputara

2 years ago

3.1k
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.

Abhiraj

1 year ago

2.9k
Tailwind simple stepper component

Santiago Hernandez

2 years ago

3.9k
Steps block

Ron Hicks

3 years ago

13.1k
Loading Stepper

Cristian

1 year ago

2.3k
Steps for complex forms

Ron Hicks

4 years ago

12.4k
List of steps

Leif99

3 years ago

13.9k
How It Works Steps
I have made it minimal and added dark mode support

Iris Callahan

1 year ago

1.8k
Steps / Service Card

Anonymous

2 years ago

6.8k
Steps section

Steven Kuhn

3 years ago

10.6k