Componente Tarjetas de producto
Un componente de tarjeta de producto simple y receptivo con microinteracciones, diseñado para interfaces de redes sociales que usan Tailwind CSS, compatible con tema oscuro y esquema de color en escala de grises.
Código HTML
<div class="flex flex-col max-w-xs mx-auto rounded-lg shadow-lg overflow-hidden bg-white dark:bg-gray-800 transition-shadow duration-300 hover:shadow-xl">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/pic1/400/300" alt="Product Image">
<div class="p-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white transition-colors duration-300">Product Title</h2>
<p class="mt-1 text-gray-600 dark:text-gray-300 transition-colors duration-300">Brief description of the product. Engaging text to attract users.</p>
<div class="flex items-center mt-3">
<img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<span class="ml-2 text-gray-700 dark:text-gray-200 transition-colors duration-300">User Name</span>
</div>
</div>
</div>
<div class="mt-4">
<button class="w-full py-2 px-4 bg-gray-800 text-white rounded hover:bg-gray-700 dark:bg-gray-600 dark:hover:bg-gray-500 transition-colors duration-300">Add to Cart</button>
</div>Componentes relacionados
Tarjetas de productos Art Deco Candy
Un componente de tarjetas de producto receptivo con un diseño inspirado en el Art Deco y una alegre combinación de colores dulces, adecuado para sistemas de reserva y reservas. Incluye soporte para modo oscuro.
Componente Tarjetas de producto
Un componente de tarjetas de producto receptivo diseñado con elementos 3D y una combinación de colores vibrantes, que incorpora un tema oscuro para el blog y el consumo de contenido. Presenta una complejidad media con elementos interactivos para la participación del usuario.
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.