Componente de componentes interactivos
Componente de componentes interactivos con diseño 3D, combinación de colores monocromática y complejidad moderada para comercio electrónico, con diseño receptivo y soporte de temas oscuros.
Código HTML
<div class="bg-gray-100 dark:bg-gray-800 py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<h2 class="text-3xl font-extrabold text-gray-900 dark:text-white sm:text-4xl">Featured Products</h2>
<p class="mt-4 text-lg leading-6 text-gray-600 dark:text-gray-300">Explore our selection of high-quality products.</p>
</div>
<div class="mt-10 grid grid-cols-1 gap-y-10 gap-x-6 sm:grid-cols-2 lg:grid-cols-3 xl:gap-x-8">
<div class="group relative bg-white dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden transform perspective-1000 hover:rotate-y-6 transition duration-500">
<div class="w-full min-h-80 aspect-w-1 aspect-h-1 rounded-md overflow-hidden group-hover:opacity-75 lg:h-80 lg:aspect-none">
<img src="https://picsum.photos/id/237/300/300" alt="Product Image" class="w-full h-full object-center object-cover lg:w-full lg:h-full">
</div>
<div class="p-4">
<h3 class="text-lg font-medium text-gray-900 dark:text-white">Product Name</h3>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Product description goes here.</p>
<div class="mt-3 flex items-center justify-between">
<p class="text-lg font-medium text-gray-900 dark:text-white">$19.99</p>
<button class="bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-700 dark:hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
</div>
</div>
</div>
<!-- Repeat product block for more products -->
<div class="group relative bg-white dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden transform perspective-1000 hover:rotate-y-6 transition duration-500">
<div class="w-full min-h-80 aspect-w-1 aspect-h-1 rounded-md overflow-hidden group-hover:opacity-75 lg:h-80 lg:aspect-none">
<img src="https://picsum.photos/id/238/300/300" alt="Product Image" class="w-full h-full object-center object-cover lg:w-full lg:h-full">
</div>
<div class="p-4">
<h3 class="text-lg font-medium text-gray-900 dark:text-white">Another Product</h3>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Another product description.</p>
<div class="mt-3 flex items-center justify-between">
<p class="text-lg font-medium text-gray-900 dark:text-white">$29.99</p>
<button class="bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-700 dark:hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
</div>
</div>
</div>
<div class="group relative bg-white dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden transform perspective-1000 hover:rotate-y-6 transition duration-500">
<div class="w-full min-h-80 aspect-w-1 aspect-h-1 rounded-md overflow-hidden group-hover:opacity-75 lg:h-80 lg:aspect-none">
<img src="https://picsum.photos/id/239/300/300" alt="Product Image" class="w-full h-full object-center object-cover lg:w-full lg:h-full">
</div>
<div class="p-4">
<h3 class="text-lg font-medium text-gray-900 dark:text-white">Third Product</h3>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Yet another product description.</p>
<div class="mt-3 flex items-center justify-between">
<p class="text-lg font-medium text-gray-900 dark:text-white">$39.99</p>
<button class="bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-700 dark:hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
</div>
</div>
</div>
</div>
</div>
</div>
Componentes relacionados
Componente de componentes interactivos
Una tarjeta de producto de comercio electrónico compleja con elementos de diseño 3D, que utiliza un esquema de color triádico, diseñada para experiencias de compra en línea interactivas con soporte de modo responsivo y oscuro.
Componente de componentes interactivos
Un componente interactivo en 3D que muestra tarjetas con efectos de profundidad, diseño responsivo y compatibilidad con temas oscuros.
Ficha de producto brutalista
Un sencillo componente interactivo de ficha de producto para e-commerce, con un diseño brutalista en escala de grises. Cuenta con una imagen del producto, título, precio y un botón 'Agregar al carrito'. El componente responde y es compatible con el modo oscuro. Se incluyen efectos de desplazamiento para la interactividad.