Componente de galería 3D
Un complejo componente de galería 3D responsivo diseñado para el comercio electrónico, con un tema oscuro y una combinación de colores complementaria.
Código HTML
<div class="max-w-7xl mx-auto p-6">
<h2 class="text-3xl font-bold text-center mb-6 text-gray-900 dark:text-white">3D Gallery Component</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Card 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105 p-4">
<div class="relative h-48 mb-4 overflow-hidden rounded-lg">
<img src="https://picsum.photos/300/200?random=1" alt="Product Image" class="w-full h-full object-cover rounded-lg shadow-md"/>
<div class="absolute top-2 left-2 bg-blue-600 text-white text-sm px-2 py-1 rounded">New</div>
</div>
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 1</h3>
<p class="mt-2 text-gray-600 dark:text-gray-400">Short description of the product goes here.</p>
<div class="mt-4 flex items-center justify-between">
<span class="text-lg font-bold text-gray-900 dark:text-gray-100">$49.99</span>
<button class="bg-blue-600 text-white px-4 py-2 rounded transition duration-300 hover:bg-blue-700">Add to Cart</button>
</div>
</div>
<!-- Card 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105 p-4">
<div class="relative h-48 mb-4 overflow-hidden rounded-lg">
<img src="https://picsum.photos/300/200?random=2" alt="Product Image" class="w-full h-full object-cover rounded-lg shadow-md"/>
<div class="absolute top-2 left-2 bg-green-600 text-white text-sm px-2 py-1 rounded">Sale</div>
</div>
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 2</h3>
<p class="mt-2 text-gray-600 dark:text-gray-400">Short description of the product goes here.</p>
<div class="mt-4 flex items-center justify-between">
<span class="text-lg font-bold text-gray-900 dark:text-gray-100">$39.99</span>
<button class="bg-green-600 text-white px-4 py-2 rounded transition duration-300 hover:bg-green-700">Add to Cart</button>
</div>
</div>
<!-- Card 3 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105 p-4">
<div class="relative h-48 mb-4 overflow-hidden rounded-lg">
<img src="https://picsum.photos/300/200?random=3" alt="Product Image" class="w-full h-full object-cover rounded-lg shadow-md"/>
<div class="absolute top-2 left-2 bg-red-600 text-white text-sm px-2 py-1 rounded">Featured</div>
</div>
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 3</h3>
<p class="mt-2 text-gray-600 dark:text-gray-400">Short description of the product goes here.</p>
<div class="mt-4 flex items-center justify-between">
<span class="text-lg font-bold text-gray-900 dark:text-gray-100">$29.99</span>
<button class="bg-red-600 text-white px-4 py-2 rounded transition duration-300 hover:bg-red-700">Add to Cart</button>
</div>
</div>
<!-- Card 4 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105 p-4">
<div class="relative h-48 mb-4 overflow-hidden rounded-lg">
<img src="https://picsum.photos/300/200?random=4" alt="Product Image" class="w-full h-full object-cover rounded-lg shadow-md"/>
<div class="absolute top-2 left-2 bg-purple-600 text-white text-sm px-2 py-1 rounded">Exclusive</div>
</div>
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 4</h3>
<p class="mt-2 text-gray-600 dark:text-gray-400">Short description of the product goes here.</p>
<div class="mt-4 flex items-center justify-between">
<span class="text-lg font-bold text-gray-900 dark:text-gray-100">$59.99</span>
<button class="bg-purple-600 text-white px-4 py-2 rounded transition duration-300 hover:bg-purple-700">Add to Cart</button>
</div>
</div>
<!-- Card 5 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105 p-4">
<div class="relative h-48 mb-4 overflow-hidden rounded-lg">
<img src="https://picsum.photos/300/200?random=5" alt="Product Image" class="w-full h-full object-cover rounded-lg shadow-md"/>
<div class="absolute top-2 left-2 bg-orange-600 text-white text-sm px-2 py-1 rounded">Popular</div>
</div>
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 5</h3>
<p class="mt-2 text-gray-600 dark:text-gray-400">Short description of the product goes here.</p>
<div class="mt-4 flex items-center justify-between">
<span class="text-lg font-bold text-gray-900 dark:text-gray-100">$19.99</span>
<button class="bg-orange-600 text-white px-4 py-2 rounded transition duration-300 hover:bg-orange-700">Add to Cart</button>
</div>
</div>
<!-- Card 6 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105 p-4">
<div class="relative h-48 mb-4 overflow-hidden rounded-lg">
<img src="https://picsum.photos/300/200?random=6" alt="Product Image" class="w-full h-full object-cover rounded-lg shadow-md"/>
<div class="absolute top-2 left-2 bg-teal-600 text-white text-sm px-2 py-1 rounded">Limited</div>
</div>
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 6</h3>
<p class="mt-2 text-gray-600 dark:text-gray-400">Short description of the product goes here.</p>
<div class="mt-4 flex items-center justify-between">
<span class="text-lg font-bold text-gray-900 dark:text-gray-100">$99.99</span>
<button class="bg-teal-600 text-white px-4 py-2 rounded transition duration-300 hover:bg-teal-700">Add to Cart</button>
</div>
</div>
</div>
</div>Componentes relacionados
Componente de galería
Un componente de galería de inspiración retro/vintage con una combinación de colores vibrantes, complejidad moderada y diseño receptivo con soporte para temas oscuros. Diseñado para el consumo de contenidos.
Componente de galería retro
Un componente de galería receptivo con estilo retro / vintage, combinación de colores vibrantes y diseño simple para el consumo de blog / contenido, con soporte para modo oscuro. Utiliza Tailwind CSS.
Componente de la galería de neumorfismo
Un componente de galería neumórfica sensible con soporte para modo oscuro. Las imágenes son marcadores de posición de picsum.photos y los avatares de randomuser.me.