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

985

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
Gradient progress bar

Author:
Kofi Osei

2 years ago

15.2k
Patient card

Author:
Anonymous

1 year ago

1.9k
item - product card

Author:
ABDO-SY

10 months ago

968
Responsive card grid
responsive card grid for articles

Author:
Mr Robot

3 years ago

15.7k
Swipe card fully animative
@sufyandevs #sufyandevs #sufyandev #shanwebdev

Author:
Sufyan jutt

2 months ago

428
profile2

Author:
pablitodgb

7 months ago

761
Website Pricing List Card Component
A Website Pricing List Card Component is a reusable UI element that displays pricing plans or packages on a website, typically for SaaS products, subscriptions, or service tiers. It helps users easily compare different pricing options and choose the best one.

Author:
dev-fab250

8 months ago

1.1k
Food delivery ecommerce Card

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

1 year ago

1.8k
card
glowing, tilt card

Author:
Akram Khan

7 months ago

590
Products cards w/ hover effect
Example of product card grid with product image, pricing and a hover effect FORKED FROM: https://tailwindflex.com/noob_dev/products-card-grid

Author:
threehymns

2 years ago

19.2k
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

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components