Home
Ronny Camacho
Card Product

Card Product

Card Product for List Product

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

Card Product

Author Ronny Camacho

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