Componente Tarjetas de producto
Un componente de tarjeta de producto receptivo diseñado para el modo oscuro, con colores vibrantes y múltiples elementos interactivos adecuados para blogs y consumo de contenido.
Código HTML
<div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold text-white mb-4">Product Title</h2>
<div class="flex items-center mb-4">
<img src="https://picsum.photos/id/100/100/100" alt="Product Image" class="w-24 h-24 rounded-lg shadow-md">
<div class="ml-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-md">
<p class="text-gray-400 text-sm">By: Author Name</p>
</div>
</div>
<p class="text-gray-300 mb-4">This is a short description of the product. It highlights the key features and benefits of the item in a concise manner.</p>
<div class="flex justify-between items-center">
<span class="text-lg text-vibrant-orange-500 font-semibold">$99.99</span>
<button class="bg-vibrant-green-500 text-white px-4 py-2 rounded hover:bg-vibrant-green-400 transition duration-150 ease-in-out">Add to Cart</button>
</div>
<div class="mt-4">
<button class="bg-gray-700 dark:bg-gray-600 text-white px-4 py-2 rounded hover:bg-gray-600 transition duration-150 ease-in-out">Details</button>
</div>
</div>
<div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-lg mt-4">
<h2 class="text-2xl font-bold text-white mb-4">Product Title</h2>
<div class="flex items-center mb-4">
<img src="https://picsum.photos/id/101/100/100" alt="Product Image" class="w-24 h-24 rounded-lg shadow-md">
<div class="ml-4">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-md">
<p class="text-gray-400 text-sm">By: Author Name</p>
</div>
</div>
<p class="text-gray-300 mb-4">This is a short description of the product. It highlights the key features and benefits of the item in a concise manner.</p>
<div class="flex justify-between items-center">
<span class="text-lg text-vibrant-orange-500 font-semibold">$79.99</span>
<button class="bg-vibrant-green-500 text-white px-4 py-2 rounded hover:bg-vibrant-green-400 transition duration-150 ease-in-out">Add to Cart</button>
</div>
<div class="mt-4">
<button class="bg-gray-700 dark:bg-gray-600 text-white px-4 py-2 rounded hover:bg-gray-600 transition duration-150 ease-in-out">Details</button>
</div>
</div>Componentes relacionados
Componente Tarjetas de producto
Un componente de tarjeta de producto responsivo con un estilo de diseño Skeuomorphism, una combinación de colores en tonos tierra e interacciones complejas, adecuado para una cartera. Incluye soporte para temas oscuros y utiliza Tailwind CSS para el estilo. Las imágenes provienen de picsum.photos y los avatares de randomuser.me.
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 simple de tarjeta de producto de comercio electrónico diseñado en estilo Material Design utilizando un esquema de color en escala de grises y un diseño receptivo con soporte para temas oscuros.