Componente Tarjetas de producto
Un componente de tarjeta de producto receptivo con microinteracciones en tonos tierra, que proporciona soporte de tema oscuro para la exhibición de portafolios.
Código HTML
<div class="flex flex-wrap justify-center p-4">
<!-- Product Card -->
<div class="max-w-xs rounded-lg overflow-hidden shadow-lg bg-white dark:bg-gray-800 transition-transform transform hover:scale-105 mx-4 mb-6">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200" alt="Product Image">
<div class="p-4">
<h2 class="text-xl font-bold text-gray-800 dark:text-white">Product Name</h2>
<p class="text-gray-600 dark:text-gray-300 mt-2">Brief description of the product that highlights its features and benefits.</p>
<div class="flex items-center mt-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<div class="ml-2">
<p class="text-gray-800 dark:text-white font-semibold">John Doe</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">Designer</p>
</div>
</div>
</div>
</div>
<!-- Repeat for more products -->
<div class="max-w-xs rounded-lg overflow-hidden shadow-lg bg-white dark:bg-gray-800 transition-transform transform hover:scale-105 mx-4 mb-6">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/201" alt="Product Image">
<div class="p-4">
<h2 class="text-xl font-bold text-gray-800 dark:text-white">Product Name 2</h2>
<p class="text-gray-600 dark:text-gray-300 mt-2">Another product description highlighting its unique aspects.</p>
<div class="flex items-center mt-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="User Avatar">
<div class="ml-2">
<p class="text-gray-800 dark:text-white font-semibold">Jane Smith</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">Developer</p>
</div>
</div>
</div>
</div>
</div>Componentes relacionados
Componente Tarjetas de producto
Un componente de tarjetas de producto responsivo diseñado utilizando los principios de Material Design con Tailwind CSS. Es compatible con el modo oscuro y presenta sombras y diseños basados en cuadrículas.
Componente Tarjetas de producto
Un componente de tarjeta de producto receptivo con diseño retro / vintage, combinación de colores análoga y soporte de tema oscuro, adecuado para un tablero. El diseño incluye marcadores de posición para imágenes y detalles del producto.
Componente Tarjetas de producto
Un componente de tarjetas de producto complejo y receptivo con un diseño corporativo/profesional que utiliza un esquema de color púrpura/violeta, adecuado para listados de productos de noticias o servicios profesionales. Incluye soporte para modo oscuro.