Card Product

Card Product for List Product

This tailwind example is contributed by Ronny Camacho, on 03-Jan-2026. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Product Showcase, Product card

Card Product

Author Ronny Camacho

Tailwind v3.4 777 2

Fork Fullscreen

<div id="grid-container" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 p-6 bg-gray-50 dark:bg-[#0f0f0f]">
  
  <div class="group bg-white dark:bg-[#1a1a1a] rounded-3xl border border-gray-100 dark:border-gray-800 overflow-hidden hover:shadow-2xl hover:shadow-orange-500/10 transition-all duration-500 flex flex-col h-full max-w-[300px] mx-auto w-full relative">
    
    <div class="absolute top-4 left-4 z-40 bg-red-600 text-white text-[11px] font-black px-3 py-1 rounded-full shadow-xl letter tracking-wider">
      OFERTA
    </div>

<div class="p-6 flex flex-col flex-grow">
      
      <h3 class="font-bold text-gray-900 dark:text-gray-100 text-xl leading-tight mb-2 group-hover:text-orange-600 dark:group-hover:text-orange-500 transition-colors">
        Redmi Note 13 Pro
      </h3>

<div class="flex items-center gap-1.5 mb-4">
        <div class="flex text-amber-400">
          <span class="material-icons !text-lg">star</span>
          <span class="material-icons !text-lg">star</span>
          <span class="material-icons !text-lg">star</span>
          <span class="material-icons !text-lg">star</span>
          <span class="material-icons !text-lg">star_half</span>
        </div>
        <span class="text-xs text-gray-400 dark:text-gray-500 font-semibold">(128 reseñas)</span>
      </div>

<p class="text-sm text-gray-500 dark:text-gray-400 leading-relaxed line-clamp-2 mb-6">
        Cámara de 200MP, pantalla AMOLED de 120Hz y la potencia que necesitas para tu día a día.
      </p>

<button class="h-12 w-12 bg-orange-600 hover:bg-orange-500 text-white rounded-2xl shadow-lg shadow-orange-600/30 transition-all active:scale-90 flex items-center justify-center group/btn">
          <span class="material-icons !text-2xl group-hover/btn:rotate-12 transition-transform">shopping_cart</span>
        </button>
      </div>
    </div>
  </div>

</div>

Related Examples

Product card for eCommerce website

Steven Kuhn

4 years ago

13.3k
Product card

Simon Scheffer

3 years ago

32.5k
Product card

Oliver Hansen

3 years ago

10.8k
Product card

Oliver Hansen

3 years ago

14.5k
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.5k
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

5k
Chat Bot
Simulation of a chat bot that can be used for conversations as a sketch idea

Ameth Galarcio

2 years ago

4.2k
Watch Card
Watch Cards

Anonymous

2 years ago

2.8k
Feature Card

Md. Tofayel islam

2 years ago

2.2k
Card
amazing card

Cristian

1 year ago

2.5k