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

871

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

9 months ago

1.4k
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

1 week ago

166
Info cards for admin panal

Author:
Sophia Baker

2 years ago

9.5k
myCard
card with image,title,body

Author:
farisubuntu

1 year ago

2.2k
Tour package card
This card could be used for featuring a product, service, or blog post:

Author:
Henrik R.

1 year ago

2.3k
User Card

Author:
Md. Tofayel islam

10 months ago

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

Author:
UI-Templates

3 weeks ago

85
Coard Component 299b
un

Author:
Kaung Htet Min

1 week ago

10
Carousel Card Slider Swiper on Alpine.JS
with support drag and drop mouse actions

Author:
Maxim

1 year ago

12.4k
Horizontal card with image

Author:
Amit Pachange

3 years ago

14.6k
Profile Card
Simple and Attractive Profile card in tailwind css

Author:
KULDEEP

4 months ago

327
Progress bar

Author:
Rajesh Maheshwari

8 months ago

891

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components