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