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

997

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

Animated Profile Card
Animated profile card with profile completion circle

Author:
Shivam Vishwakarma

1 year ago

1.5k
Product card
sleek and modern product card

Author:
OmKar Mehta

1 year ago

6.6k
Card
Jobs recommended for you LinkedIn Clone

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

10 months ago

1.1k
Hover effect card with background image
Beautiful card with background image, hover effect and gradient

Author:
Walid Ahmad

1 year ago

3.6k
Admin dashboard cards
Card groups for showing stats/info. Change it for responsiveness for small and medium screen

Author:
farisubuntu

1 year ago

2.9k
Code Editor UI
Simple code editor prototype made with HTML and TailwindCSS. A lightweight template to explore and customize.

Author:
Indra

5 months ago

469
Responsive Features Section

Author:
ariaw

10 months ago

951
Experince Section

Author:
ABDO-SY

1 year ago

1k
Website Pricing List Card Component
Website Pricing List Card Component with Package Names: Basic Package → Starter Website Premium Package → Business Website Professional Package → E-Commerce Solution Pricing Structure: Increased prices significantly to reflect web development services one-time payment model FAQ Content.

Author:
Ayyamperumal S

10 months ago

1.4k
Status bar

Author:
Maxim

1 year ago

995
multiple pricing cards
basic pricing card with single price

Author:
Amit Pachange

2 years ago

12.7k
Cards

Author:
Morris Muriuki Muthigani

6 months ago

1.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components