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.
Código HTML
<div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/400/300" alt="Product Image">
<div class="p-4">
<h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200">Product Title</h2>
<p class="text-gray-600 dark:text-gray-400 mt-2">This is a brief description of the product showcasing its features and benefits.</p>
<div class="mt-4">
<a href="#" class="bg-gray-800 text-white font-bold py-2 px-4 rounded hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600">View Product</a>
</div>
</div>
</div>
<div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden mt-6">
<img class="w-full h-48 object-cover" src="https://picsum.photos/400/301" alt="Product Image">
<div class="p-4">
<h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200">Product Title</h2>
<p class="text-gray-600 dark:text-gray-400 mt-2">This is a brief description of the product showcasing its features and benefits.</p>
<div class="mt-4">
<a href="#" class="bg-gray-800 text-white font-bold py-2 px-4 rounded hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600">View Product</a>
</div>
</div>
</div>
<div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden mt-6">
<img class="w-full h-48 object-cover" src="https://picsum.photos/400/302" alt="Product Image">
<div class="p-4">
<h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200">Product Title</h2>
<p class="text-gray-600 dark:text-gray-400 mt-2">This is a brief description of the product showcasing its features and benefits.</p>
<div class="mt-4">
<a href="#" class="bg-gray-800 text-white font-bold py-2 px-4 rounded hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600">View Product</a>
</div>
</div>
</div>
<div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden mt-6">
<div class="flex items-center p-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
<div class="ml-3">
<h3 class="text-gray-800 dark:text-gray-200 font-bold">User Name</h3>
<p class="text-gray-600 dark:text-gray-400">Product Owner</p>
</div>
</div>
</div>Componentes relacionados
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
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.
Componente Tarjetas de producto
Un componente de tarjeta de producto responsivo con diseño de Glassmorphism, combinación de colores en escala de grises y compatibilidad con temas oscuros. Incluye múltiples elementos interactivos adecuados para las interfaces de redes sociales, como la imagen del producto, el título, la descripción, el precio y el botón Agregar al carrito. El diseño utiliza elementos translúcidos similares al vidrio escarchado con efectos de desenfoque. No se utiliza Javascript, solo HTML con clases CSS de Tailwind.