Componente de componentes de comercio electrónico
Un componente de comercio electrónico receptivo con microinteracciones, combinación de colores en tonos tierra, complejidad moderada y compatibilidad con el modo oscuro.
Código HTML
<div class="bg-gray-100 dark:bg-gray-900 py-8">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col md:flex-row -mx-4">
<div class="md:flex-1 px-4">
<div class="h-[460px] rounded-lg bg-gray-300 dark:bg-gray-700 mb-4 animate-pulse"></div>
<div class="flex -mx-2 mb-4">
<div class="w-1/2 px-2">
<button class="w-full bg-amber-900 dark:bg-amber-700 text-white py-2 px-4 rounded-full font-bold hover:bg-amber-800 dark:hover:bg-amber-600 transform transition duration-300 hover:scale-105">Add to Cart</button>
</div>
<div class="w-1/2 px-2">
<button class="w-full bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-white py-2 px-4 rounded-full font-bold hover:bg-gray-300 dark:hover:bg-gray-700 transform transition duration-300 hover:scale-105">Add to Wishlist</button>
</div>
</div>
</div>
<div class="md:flex-1 px-4">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">Product Name Microinteraction</h2>
<p class="text-gray-600 dark:text-gray-300 text-sm mb-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed
ante justo. Integer eu eleifend erat. Quisque dapibus rupus augue,
a dapibus velit tincidunt et. Sed sed ante justo.
</p>
<div class="flex mb-4">
<div class="mr-4">
<span class="font-bold text-gray-700 dark:text-gray-300">Price:</span>
<span class="text-gray-600 dark:text-gray-300">$29.99</span>
</div>
<div>
<span class="font-bold text-gray-700 dark:text-gray-300">Availability:</span>
<span class="text-gray-600 dark:text-gray-300">In Stock</span>
</div>
</div>
<div class="mb-4">
<span class="font-bold text-gray-700 dark:text-gray-300">Select Color:</span>
<div class="flex items-center mt-2">
<button class="w-6 h-6 rounded-full bg-brown-700 dark:bg-brown-500 mr-2"></button>
<button class="w-6 h-6 rounded-full bg-green-700 dark:bg-green-500 mr-2"></button>
<button class="w-6 h-6 rounded-full bg-stone-700 dark:bg-stone-500"></button>
</div>
</div>
<div class="mb-4">
<span class="font-bold text-gray-700 dark:text-gray-300">Select Size:</span>
<div class="flex items-center mt-2">
<button class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-white py-2 px-4 rounded-full font-bold mr-2 hover:bg-gray-400 dark:hover:bg-gray-600 transform transition duration-300 hover:scale-105">S</button>
<button class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-white py-2 px-4 rounded-full font-bold mr-2 hover:bg-gray-400 dark:hover:bg-gray-600 transform transition duration-300 hover:scale-105">M</button>
<button class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-white py-2 px-4 rounded-full font-bold mr-2 hover:bg-gray-400 dark:hover:bg-gray-600 transform transition duration-300 hover:scale-105">L</button>
<button class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-white py-2 px-4 rounded-full font-bold mr-2 hover:bg-gray-400 dark:hover:bg-gray-600 transform transition duration-300 hover:scale-105">XL</button>
<button class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-white py-2 px-4 rounded-full font-bold mr-2 hover:bg-gray-400 dark:hover:bg-gray-600 transform transition duration-300 hover:scale-105">XXL</button>
</div>
</div>
</div>
</div>
</div>
</div>Componentes relacionados
Componente de componentes de comercio electrónico
Un componente de reserva/reserva simple y minimalista con un estilo de tipografía suiza/internacional, con un esquema de color en blanco y negro con un acento brillante. Es totalmente sensible y es compatible con el modo oscuro.
Industrial_Monochrome_Blog_Card
Una tarjeta de consumo de blog/contenido compleja y responsiva con una estética industrial, que utiliza un esquema de color blanco y negro con un solo acento brillante. Cuenta con elementos expuestos y diseño utilitario, con soporte para modo oscuro.
Brutalism_Retro_Simple_E-commerce_Agriculture_Product_Card
Una tarjeta de producto simple de estilo brutalista para un sitio web de agricultura / agricultura de comercio electrónico con una combinación de colores retro, con una imagen del producto, título, precio y botón para agregar al carrito. Diseñado con capacidad de respuesta y soporte para modo oscuro.