Composant Galerie 3D
Un composant de galerie 3D réactif complexe conçu pour le commerce électronique, avec un thème sombre et une palette de couleurs complémentaire.
HTML Code
<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>Composants associés
Composant Galerie
Composant de galerie réactive avec conception 3D, schéma de couleurs analogues et prise en charge du mode sombre pour les interfaces de médias sociaux.
Composant Galerie
Un composant de galerie réactif avec un effet de glassmorphism, des couleurs vives et une prise en charge du thème sombre, adapté à un tableau de bord.
Composant Neumorphism Gallery
Un composant de galerie Neumorphic réactif avec prise en charge du mode sombre. Les images sont des espaces réservés de picsum.photos et des avatars de randomuser.me.