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
Fichas de producto Componente 52
Un componente de tarjeta de producto receptivo que utiliza el estilo de diseño Glassmorphism con soporte para temas oscuros y Tailwind CSS.
Componente Tarjetas de producto
Un componente de tarjeta de producto receptivo con diseño 3D, combinación de colores análoga y compatibilidad con modo oscuro, diseñado para interfaces de redes sociales.
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.