Product Card for eCommerce

Here is a Product Card with discount badge, price with discount and price normally.
On other hand, buttons for up or down quantity and add to cart button.
This is create for Grid Columns, wich can 4 or 5 depend for desktop

This tailwind example is contributed by Andrés Abarzúa, on 08-Jul-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Product Showcase, Product card

Card Product eCommerce

Author Andrés Abarzúa

Tailwind v3.4 1.3k 4

Fork Fullscreen

<div class="relative flex flex-col overflow-hidden rounded-lg border border-gray-100 bg-white shadow-md max-w-xs m-4">
  <a href="#" class="relative mx-3 mt-3 flex h-40 overflow-hidden rounded-xl">
    <img 
      src="https://administracion.dlds.cl/1762/1762.jpg"
      alt="Bong de vidrio 25cm"
      loading="lazy"
      class="object-contain w-full h-full"
    />
  </a>
  <div class="flex flex-col flex-grow mt-2 px-3 pb-3">
    <a href="/p/1/bong-vidrio-25cm" class="block relative group">
      <h5 class="text-xs tracking-tight text-slate-900 font-bold flex items-center">
        Bubbler Kush - Bonglab
        <span class="ml-1"></span>
      </h5>
    </a>
    <div class="mt-auto">

Related Examples

Product Page
Showcase for the product.

Prem..

4 years ago

34.7k
Product card for eCommerce website

Steven Kuhn

3 years ago

13.3k
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
Product card

Simon Scheffer

3 years ago

32.4k
Product card

Oliver Hansen

3 years ago

10.7k
Product card

Oliver Hansen

3 years ago

14.5k
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
Card Component
A Simple Card Component with full responsiveness and dark mode supported

Shariar Hasan

2 years ago

4k
Product card
sleek and modern product card

OmKar Mehta

2 years ago

7.4k
Minimal Card
This is awesome looking card

Shaik Sameer Basha

2 years ago

3.4k
Card-Product
Item or card to show products

Ameth Galarcio

2 years ago

4.9k