Home
Developer Kwame
Products Layout

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 CSS v3. It is responsive. similar terms for this example are Services,Why choose us

Card Feature showcase eCommerce

Author Developer Kwame

229

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

Author:
Steven Kuhn

3 years ago

10.1k
Product card for eCommerce website

Author:
Steven Kuhn

3 years ago

12.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.

Author:
Amit Pachange

3 years ago

51.5k
Responsive Feature Card

Author:
Gopi Yadav

3 years ago

13.3k
Feature Card
Elevated card

Author:
Prajwal Hallale

3 years ago

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

Author:
Noob

3 years ago

17.4k
Products card grid
Example of product card grid with product image and pricing

Author:
Noob

3 years ago

23.4k
Features cards section
Features cards section with dark theme

Author:
Sophia Baker

2 years ago

10k
Features grid

Author:
Sophia Baker

2 years ago

10k
Feature cards with icons on top

Author:
Manon Daniel

2 years ago

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

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

Author:
Ragnar lodbrok

1 year ago

5.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components