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 v3.4. It is responsive.

Card Progress Bar

Author ABDO-SY

Tailwind v3.4 1.6k 6

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

Shivam Vishwakarma

1 year ago

2.3k
content section

Crimson

1 year ago

1.6k
Card section
Card section. find it makecomponents.com

makecomponents

2 years ago

2.7k
Feature Showcase + Cards
Responsive section with cards aligned using grid layout.

ABDO-SY

1 year ago

3.3k
google ui cards
google ui cards

Anonymous

3 years ago

10.6k
User Card

Md. Tofayel islam

1 year ago

2k
Shop Now Amazon x
Product cards

ORGIN_DREAMS

1 year ago

1.9k
Profile Card
Modern Profile card with Subtle overlay on image, minimal and clean approach with emphasis on readability and hierarchy.

UI-Templates

1 year ago

1.5k
Product / Service Card
Example of a card that can be used as a blog, product, or service card with reviews.

Noob

4 years ago

18.8k
beautifull feature section
We create a Advance animated feature section using tailwindcss and custom css

Akram Khan

2 years ago

3.2k
Food delivery ecommerce Card

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

2.9k
Trending Creators
Trending Creators

Omer fils ELENGA

1 month ago

10