Home
ABDO-SY
Responsive Working Process Section

Responsive Working Process Section

This modern and responsive "Our Working Process" section adapts seamlessly to all screen sizes, ensuring a smooth user experience. The design follows a structured step-by-step layout with clear typography, bold colors, and interactive elements, making it perfect for showcasing business processes or workflows.

This tailwind example is contributed by ABDO-SY, on 26-Mar-2025. Component is made with Tailwind CSS v3. It is responsive.

Card Progress Bar

Author ABDO-SY

Fork Fullscreen

<section
  class="max-w-[1440px] mx-auto pb-10 pt-12 px-5 sm:px-8 font-['Space_Grotesk']"
>
  <div
    class="mx-auto max-w-7xl flex flex-col md:flex-row justify-center items-center md:justify-start md:items-start gap-4 md:gap-10 mb-8 md:mb-20"
  >
    <h1 class="px-2 bg-[#b9ff66] rounded-lg text-black text-[40px] font-medium">
      Our Working Process
    </h1>
    <p class="text-black text-lg font-normal">
      Step-by-Step Guide to Achieving <br class="md:block hidden" />
      Your Business Goals
    </p>
  </div>
  <div
    class="mx-auto max-w-7xl px-8 sm:px-16 py-6 sm:py-10 bg-[#b9ff66] rounded-[45px] shadow-[0px_5px_0px_0px_rgba(25,26,35,1.00)] outline outline-1 outline-offset-[-1px] outline-[#191a23] flex flex-col justify-start items-start gap-7 overflow-hidden"
  >
    <header
      class="w-full inline-flex justify-between items-center overflow-hidden"
    >
      <h2 class="flex items-center gap-4 sm:gap-6 text-black font-medium">
        <span class="text-4xl sm:text-6xl">01</span
        ><span class="text-2xl sm:text-3xl">Consultation</span>
      </h2>
      <svg
        class="w-10 h-10 sm:w-14 sm:h-14"
        viewBox="0 0 58 59"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <circle
          cx="29"
          cy="29.5"
          r="28.5"
          fill="#F3F3F3"
          stroke="#191A23"
        ></circle>
        <path d="M20 32.14V26.5H37.76V32.14H20Z" fill="black"></path>
      </svg>
    </header>
    <div class="w-full border border-black"></div>
    <p
      class="w-full min-h-14 justify-start text-black text-base sm:text-lg font-normal"
    >
      During the initial consultation, we will discuss your business goals and
      objectives, target audience, and current marketing efforts. This will
      allow us to understand your needs and tailor our services to best fit your
      requirements.
    </p>
  </div>
  <div
    class="mx-auto mt-7 max-w-7xl px-8 sm:px-16 py-6 sm:py-10 bg-white rounded-[45px] shadow-[0px_5px_0px_0px_rgba(25,26,35,1.00)] outline outline-1 outline-offset-[-1px] outline-[#191a23] flex flex-col justify-start items-start gap-7 overflow-hidden"
  >
    <header
      class="w-full inline-flex justify-between items-center overflow-hidden"
    >
      <h2 class="flex items-center gap-4 sm:gap-6 text-black font-medium">
        <span class="text-4xl sm:text-6xl">02</span
        ><span class="text-2xl sm:text-3xl">Implementation</span>
      </h2>
      <svg
        class="w-10 h-10 sm:w-14 sm:h-14"
        viewBox="0 0 58 59"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <circle
          cx="29"
          cy="29.5"
          r="28.5"
          fill="#F3F3F3"
          stroke="#191A23"
        ></circle>
        <path
          d="M25.6 41.58V31.86H16V26.22H25.6V16.5H31.48V26.22H41.08V31.86H31.48V41.58H25.6Z"
          fill="#191A23"
        ></path>
      </svg>
    </header>
  </div>
  <div
    class="mx-auto mt-7 max-w-7xl px-8 sm:px-16 py-6 sm:py-10 bg-white rounded-[45px] shadow-[0px_5px_0px_0px_rgba(25,26,35,1.00)] outline outline-1 outline-offset-[-1px] outline-[#191a23] flex flex-col justify-start items-start gap-7 overflow-hidden"
  >
    <header
      class="w-full inline-flex justify-between items-center overflow-hidden"
    >
      <h2 class="flex items-center gap-4 sm:gap-6 text-black font-medium">
        <span class="text-4xl sm:text-6xl">03</span
        ><span class="text-2xl sm:text-3xl">Testing</span>
      </h2>
      <svg
        class="w-10 h-10 sm:w-14 sm:h-14"
        viewBox="0 0 58 59"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <circle
          cx="29"
          cy="29.5"
          r="28.5"
          fill="#F3F3F3"
          stroke="#191A23"
        ></circle>
        <path
          d="M25.6 41.58V31.86H16V26.22H25.6V16.5H31.48V26.22H41.08V31.86H31.48V41.58H25.6Z"
          fill="#191A23"
        ></path>
      </svg>
    </header>
  </div>
</section>

Related Examples