How it works

Grids steps on how it works

This tailwind example is contributed by Olajide Olamide (Laemmy), on 17-Mar-2026. Component is made with Tailwind v3.4. It is responsive. similar terms for this example is stepper

Steps Grid

Author Olajide Olamide (Laemmy)

Tailwind v3.4 738 1

Fork Fullscreen

<section class="bg-stoner">
    <div class="py-20 md:py-40 px-6 w-full md:container mx-auto">
      <div class="text-center mb-5 md:mb-16">
        <p class="text-gold text-xs md:text-sm uppercase tracking-[0.3em] mb-5">
          <span class="text-gold">✨</span> how it works
        </p>
        <h2
          class="font-serif text-4xl md:text-6xl font-semibold text-charcoal leading-10 mb-6 md:mb-10"
        >
           We make your interior design<br /><em class="italic font-light"
            >journey simple and stress-free</em
          >
        </h2>
      </div>
      <div class="grid md:grid-cols-4 gap-8">
        <div
          class="text-center group"
        >
          <div class="relative mt-10 md:mt-20 mb-6">
            <div
              class="w-16 h-16  flex items-center justify-center mx-auto transition-colors duration-300 relative"
            >
              <span
                class="absolute z-20 font-sans text-[#baa97830] text-5xl md:text-9xl font-bold"
                >01</span
              >
              <span class="font-sans text-gold text-3xl md:text-5xl font-bold"
                >01</span
              >
            </div>

<div
              class="hidden md:block absolute top-8 left-[calc(50%+2rem)] w-[calc(100%-2rem)] h-px bg-gold/20"
            ></div>
          </div>
          <h3
            class="font-serif text-lg md:text-xl font-semibold text-charcoal mb-3 mt-10 md:mt-10 md:mt-20"
          >
            DConsultation
          </h3>
          <p class="text-charcoal/50 text-sm md:text-base leading-relaxed mb-6">
            We discuss your vision, style, and budget to understand your needs.
          </p>
        </div>
        <div
          class="text-center group"
        >
          <div class="relative mt-10 md:mt-20 mb-6">
            <div
              class="w-16 h-16  flex items-center justify-center mx-auto transition-colors duration-300 relative"
            >
              <span
                class="absolute z-20 font-sans text-[#baa97830] text-5xl md:text-9xl font-bold"
                >02</span
              >
              <span class="font-sans text-gold text-3xl md:text-5xl font-bold"
                >02</span
              >
            </div>

<div
              class="hidden md:block absolute top-8 left-[calc(50%+2rem)] w-[calc(100%-2rem)] h-px bg-gold/20"
            ></div>
          </div>
          <h3
            class="font-serif text-lg md:text-xl font-semibold text-charcoal mb-3 mt-10 md:mt-10 md:mt-20"
          >
            Concept Design
          </h3>
          <p class="text-charcoal/50 text-sm md:text-base leading-relaxed mb-6">
           Our team creates layouts, mood boards, and 3D previews.
          </p>
        </div>
        <div
          class="text-center group"
        >
          <div class="relative mt-10 md:mt-20 mb-6">
            <div
              class="w-16 h-16  flex items-center justify-center mx-auto transition-colors duration-300 relative"
            >
              <span
                class="absolute z-20 font-sans text-[#baa97830] text-5xl md:text-9xl font-bold"
                >03</span
              >
              <span class="font-sans text-gold text-3xl md:text-5xl font-bold"
                >03</span
              >
            </div>

<div
              class="hidden md:block absolute top-8 left-[calc(50%+2rem)] w-[calc(100%-2rem)] h-px bg-gold/20"
            ></div>
          </div>
          <h3
            class="font-serif text-lg md:text-xl font-semibold text-charcoal mb-3 mt-10 md:mt-10 md:mt-20"
          >
            Execution
          </h3>
          <p class="text-charcoal/50 text-sm md:text-base leading-relaxed mb-6">
            We bring the design to life with quality materials and experts.
          </p>
        </div>
        <div
          class="text-center group"
        >
          <div class="relative mt-10 md:mt-20 mb-6">
            <div
              class="w-16 h-16  flex items-center justify-center mx-auto transition-colors duration-300 relative"
            >
              <span
                class="absolute z-20 font-sans text-[#baa97830] text-5xl md:text-9xl font-bold"
                >04</span
              >
              <span class="font-sans text-gold text-3xl md:text-5xl font-bold"
                >04</span
              >
            </div>

</div>
          <h3
            class="font-serif text-lg md:text-xl font-semibold text-charcoal mb-3 mt-10 md:mt-10 md:mt-20"
          >
           Final Reveal
          </h3>
          <p class="text-charcoal/50 text-sm md:text-base leading-relaxed mb-6">
            Step into your beautifully transformed space — ready to enjoy.
          </p>
        </div>
      </div>
    </div>
  </section>

Related Examples

Process Steps Grid
A structured way to present information about each step, along with corresponding icons and descriptions. Each step card is designed with a hover effect.

Computer guy

3 years ago

12.1k
Brand Grid with Hover Effect

ariaw

1 year ago

2.1k
Responsive Hero Section with Typewriter Effect
A modern hero section featuring a typewriter animation effect, social media links, and responsive design. Includes a user avatar placeholder and a clean dark gradient background. Built with Tailwind CSS and Font Awesome icons. Perfect for personal portfolio websites.

Muhammad Umair Arshad

1 year ago

1.4k
Card KPI
Targetas ahora con un grafico

Raul antonio de la cruz hernandez

1 year ago

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

threehymns

3 years ago

20.2k
hover grid card
hover over card to change images and contents.

Olajide Olamide (Laemmy)

6 months ago

495
Tailwind products list

Isabella Kowalski

3 years ago

14.7k
Company icons grid

Amit Pachange

3 years ago

13.7k
Card 30/70

Maxim

1 year ago

1.8k
Features section
Showcase your key features

Manon Daniel

3 years ago

17.6k
Card
travel place card hover effect card

nahid hasan

1 year ago

2.5k
Responsive card grid
responsive card grid for articles

Mr Robot

3 years ago

16.7k