Home
Carlos
How it works section with steps

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 CSS v3. It is responsive. It supports dark mode. similar terms for this example is stepper

Steps

Author Carlos

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

Shoping form steps

Author:
Carlos

1 year ago

1.8k
Steps section

Author:
Steven Kuhn

3 years ago

10k
Tailwind stepper example

Author:
Erik Hyatt

2 years ago

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

Author:
Anonymous

2 years ago

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

1 year ago

2k
Simple stepper section
multipurpose verticle stepper

Author:
S. Patel

3 years ago

10.5k
step
html , css

Author:
Hacker Development

10 months ago

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

Author:
Iris Callahan

1 year ago

1.4k
List of steps

Author:
Leif99

3 years ago

13.6k
Process Steps Grid
A structured way to present information about each step, along with corresponding icons and descriptions. Each step card is designed with a hover effect.

Author:
Computer guy

2 years ago

11.8k
Stepper block
A full-width steps section

Author:
Ron Hicks

3 years ago

12.5k
Steps section for how it works
Info cards for how does it work section?

Author:
Anonymous

1 year ago

1.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components