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

2.3k

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

Profile Stepper Form
Progressive Profile Form

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

1 year ago

4.2k
List of steps

Author:
Leif99

2 years ago

13.1k
How does it work?

Author:
Abdul Baset Bappy

3 months ago

297
Tailwind stepper example

Author:
Erik Hyatt

2 years ago

11k
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
Steps section for explaining process
Step component with a curved line connecting all steps

Author:
Anonymous

1 year ago

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

Author:
Komal Jain

1 year ago

9.1k
Responsive steps section

Author:
Simon Scheffer

2 years ago

9k
Steps / Service Card

Author:
Anonymous

1 year ago

5.7k
Steps block

Author:
Ron Hicks

2 years ago

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

1 year ago

11.1k
Steps section

Author:
Steven Kuhn

2 years ago

9.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components