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

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

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

9 months ago

1.3k
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.3k
Stepper example
Explain How it works to your audience

Author:
Santos78

2 years ago

14.7k
Simple stepper section
multipurpose verticle stepper

Author:
S. Patel

2 years ago

10.1k
Profile Stepper Form
Progressive Profile Form

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

1 year ago

4.5k
Steps for complex forms

Author:
Ron Hicks

3 years ago

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

Author:
Iris Callahan

11 months ago

1.2k
Steps block

Author:
Ron Hicks

2 years ago

12.1k
List of steps

Author:
Leif99

2 years ago

13.2k
step
html , css

Author:
Hacker Development

5 months ago

275
How does it work?

Author:
Abdul Baset Bappy

4 months ago

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

Author:
Anonymous

1 year ago

9.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components