Componente de componentes de comercio electrónico
Un componente de comercio electrónico receptivo con microinteracciones, combinación de colores análoga y compatibilidad con temas oscuros.
Código HTML
<div class="container mx-auto p-4 dark:bg-gray-800">
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- Product 1 -->
<div class="bg-white rounded-lg shadow-md overflow-hidden transform transition duration-500 hover:scale-105 dark:bg-gray-700">
<img src="https://picsum.photos/600/400" alt="Product Image" class="w-full h-64 object-cover">
<div class="p-4">
<h3 class="text-xl font-bold mb-2 text-gray-800 dark:text-white">Product Title</h3>
<p class="text-gray-600 text-sm mb-4 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="flex items-center justify-between">
<span class="text-2xl font-bold text-blue-600 dark:text-blue-400">$99.99</span>
<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition duration-300 dark:bg-blue-700 dark:hover:bg-blue-600">Add to Cart</button>
</div>
</div>
</div>
<!-- Product 2 (similar structure) -->
<div class="bg-white rounded-lg shadow-md overflow-hidden transform transition duration-500 hover:scale-105 dark:bg-gray-700">
<img src="https://picsum.photos/600/400" alt="Product Image" class="w-full h-64 object-cover">
<div class="p-4">
<h3 class="text-xl font-bold mb-2 text-gray-800 dark:text-white">Product Title</h3>
<p class="text-gray-600 text-sm mb-4 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="flex items-center justify-between">
<span class="text-2xl font-bold text-blue-600 dark:text-blue-400">$99.99</span>
<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition duration-300 dark:bg-blue-700 dark:hover:bg-blue-600">Add to Cart</button>
</div>
</div>
</div>
</div>
</div>Componentes relacionados
Componentes de comercio electrónico
Un componente de comercio electrónico de complejidad moderada con un diseño de modo oscuro que utiliza colores en tonos tierra para una exhibición de portafolio.
Componente de comercio electrónico
Un componente de comercio electrónico receptivo con estilo Glassmorphism y colores pastel, adecuado para interfaces de redes sociales, con soporte para temas oscuros.
rejilla de productos retro-monocromo
Un componente de cuadrícula de productos de comercio electrónico retro/vintage simple y receptivo diseñado en una paleta violeta monocromática con soporte para temas oscuros. El diseño evoca la nostalgia de los años 80/90 con un diseño básico y elementos mínimos, perfecto para las experiencias de compra en línea.