Componente Tarjetas de producto
Tarjetas de producto responsivas con efecto de vidrio esmerilado Glassmorphism usando colores pastel, con soporte para modo oscuro. Adecuado para interfaces de redes sociales.
Código HTML
<div class="flex flex-col min-h-screen bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-900 dark:to-black items-center justify-center p-8">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Product Card 1 -->
<div class="bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 backdrop-filter backdrop-blur-lg rounded-xl shadow-lg p-6 transform transition duration-500 hover:scale-105">
<img src="https://picsum.photos/400/250?random=1" alt="Product Image" class="rounded-lg mb-4">
<h3 class="font-bold text-xl text-gray-800 dark:text-gray-100 mb-2">Pastel Dreams</h3>
<p class="text-gray-700 dark:text-gray-300 text-base mb-4">Embrace the soft hues and gentle vibes with this serene collection.</p>
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-800 dark:text-gray-200 text-sm">John Doe</span>
</div>
<div class="flex justify-between items-center">
<span class="text-lg font-bold text-purple-700 dark:text-purple-300">$29.99</span>
<button class="bg-purple-500 hover:bg-purple-600 text-white font-bold py-2 px-4 rounded-full transition duration-300">View Product</button>
</div>
</div>
<!-- Product Card 2 -->
<div class="bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 backdrop-filter backdrop-blur-lg rounded-xl shadow-lg p-6 transform transition duration-500 hover:scale-105">
<img src="https://picsum.photos/400/250?random=2" alt="Product Image" class="rounded-lg mb-4">
<h3 class="font-bold text-xl text-gray-800 dark:text-gray-100 mb-2">Whispering Lilacs</h3>
<p class="text-gray-700 dark:text-gray-300 text-base mb-4">Delicate and enchanting, perfect for a touch of elegance in your feed.</p>
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-800 dark:text-gray-200 text-sm">Jane Smith</span>
</div>
<div class="flex justify-between items-center">
<span class="text-lg font-bold text-pink-700 dark:text-pink-300">$35.50</span>
<button class="bg-pink-500 hover:bg-pink-600 text-white font-bold py-2 px-4 rounded-full transition duration-300">View Product</button>
</div>
</div>
<!-- Product Card 3 -->
<div class="bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 backdrop-filter backdrop-blur-lg rounded-xl shadow-lg p-6 transform transition duration-500 hover:scale-105">
<img src="https://picsum.photos/400/250?random=3" alt="Product Image" class="rounded-lg mb-4">
<h3 class="font-bold text-xl text-gray-800 dark:text-gray-100 mb-2">Misty Mornings</h3>
<p class="text-gray-700 dark:text-gray-300 text-base mb-4">Soft and inviting, ideal for sharing peaceful moments with your followers.</p>
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-800 dark:text-gray-200 text-sm">Peter Jones</span>
</div>
<div class="flex justify-between items-center">
<span class="text-lg font-bold text-green-700 dark:text-green-300">$22.00</span>
<button class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-full transition duration-300">View Product</button>
</div>
</div>
</div>
</div>Componentes relacionados
Componente Tarjetas de producto
Un componente de tarjeta de producto responsivo diseñado en estilo Material Design, con una combinación de colores en escala de grises. Incluye una imagen, un título, una descripción y un botón con soporte para el modo oscuro mediante Tailwind CSS.
Ficha de producto Skeuomórfico
Un componente de tarjeta de producto skeuomórfico para un tablero, con estilo en escala de grises, complejidad media, responsivo con modo oscuro.
Componente Tarjetas de producto
Un componente de tarjetas de producto receptivo diseñado con estilo de skeuomorfismo, combinación de colores de tonos tierra y compatibilidad con temas oscuros. Ideal para cuadros de mando.