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 receptivo con microinteracciones, que utiliza un esquema de color en escala de grises y admite el modo oscuro. Ideal para fines de blog o consumo de contenido.
Componente Tarjetas de producto
Un componente de tarjeta de producto receptivo con microinteracciones, diseño monocromático y compatibilidad con temas oscuros.
Componente Tarjetas de producto
Un componente complejo de la tarjeta de producto con microinteracciones atractivas y una combinación de colores monocromática. Diseñado para sitios web comerciales, es responsivo y admite el modo oscuro.