Products Layout

An ecommerce store front product list layout

This tailwind example is contributed by Developer Kwame, on 25-Sep-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Services,Why choose us

Card Feature showcase eCommerce

Author Developer Kwame

Tailwind v3.4 1.1k 3

Fork Fullscreen

<div class="max-w-[1200px] mx-auto px-6 py-12">
  
  <div class="flex items-center justify-between mb-8">
    <h2 class="text-2xl font-bold tracking-wide">APPAREL</h2>
    <a href="#"
       class="inline-block bg-white border border-gray-200 rounded-full px-5 py-2 font-semibold shadow-sm text-[#074BA1] hover:bg-gray-50 transition-colors duration-200">
       View all Apparel
    </a>
  </div>

<div class="grid gap-10 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
    
    
    <article class="relative bg-[#D6E1E5] rounded-2xl p-10 min-h-[480px] flex flex-col items-center transition-transform duration-300 ease-out hover:-translate-y-2 hover:shadow-xl group">
      <span class="absolute top-4 right-4 bg-black text-white rounded-full px-3 py-1 text-xs font-semibold">Promo available</span>
      <img class="w-3/4 max-w-[300px] object-contain mt-4 transform transition-transform duration-300 group-hover:scale-105"
           src="https://via.placeholder.com/420x560.png?text=Pants"
           alt="Bulked Up Vibes Wide-Leg Pants"
           loading="lazy">
      <div class="mt-auto text-center">
        <div class="mt-6 font-semibold text-sm">Bulked Up Vibes Wide-Leg Pants</div>
        <div class="text-sm mt-2">$48.00</div>
      </div>
    </article>

<article class="relative bg-[#D6E1E5] rounded-2xl p-10 min-h-[480px] flex flex-col items-center transition-transform duration-300 ease-out hover:-translate-y-2 hover:shadow-xl group">
      <span class="absolute top-4 right-4 bg-black text-white rounded-full px-3 py-1 text-xs font-semibold">Promo available</span>
      <img class="w-3/4 max-w-[300px] object-contain mt-4 transform transition-transform duration-300 group-hover:scale-105"
           src="https://via.placeholder.com/420x560.png?text=Jersey"
           alt="The Best Part Basketball Jersey"
           loading="lazy">
      <div class="mt-auto text-center">
        <div class="mt-6 font-semibold text-sm">The Best Part Basketball Jersey</div>
        <div class="text-sm mt-2">$32.00</div>
      </div>
    </article>

<article class="relative bg-[#D6E1E5] rounded-2xl p-10 min-h-[480px] flex flex-col items-center transition-transform duration-300 ease-out hover:-translate-y-2 hover:shadow-xl group">
      <span class="absolute top-4 right-4 bg-black text-white rounded-full px-3 py-1 text-xs font-semibold">Promo available</span>
      <img class="w-3/4 max-w-[300px] object-contain mt-4 transform transition-transform duration-300 group-hover:scale-105"
           src="https://via.placeholder.com/420x560.png?text=Leggings"
           alt="Brainy Brain Capri Leggings"
           loading="lazy">
      <div class="mt-auto text-center">
        <div class="mt-6 font-semibold text-sm">Brainy Brain Capri Leggings</div>
        <div class="text-sm mt-2">$42.00</div>
      </div>
    </article>

</div>
</div>

Related Examples

Feature cards
Feature showcase

Steven Kuhn

4 years ago

10.7k
Product card for eCommerce website

Steven Kuhn

3 years ago

13.3k
Responsive Card Grid
Tailwind CSS responsive grid for feature listing. The cards have a teal background, rounded corners, and a concise display of feature titles, descriptions, and a "Learn More" link.

Amit Pachange

4 years ago

53.6k
Responsive Feature Card

Gopi Yadav

4 years ago

14.3k
Feature Card
Elevated card

Prajwal Hallale

4 years ago

10.8k
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.7k
Products card grid
Example of product card grid with product image and pricing

Noob

3 years ago

24.8k
Features cards section
Features cards section with dark theme

Sophia Baker

3 years ago

11.1k
Features grid

Sophia Baker

3 years ago

10.8k
Feature cards with icons on top

Manon Daniel

3 years ago

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

2 years ago

20.1k
Responsive Features Section
It's a Handy Ready to Use Responsive Features or Services Component with Dark Mode

Ragnar lodbrok

2 years ago

5.9k