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
Galerie de produits e-commerce
Un composant de galerie de produits minimaliste et réactif pour le commerce électronique, avec des tons océan/bleu, la prise en charge du mode sombre et l’affichage interactif des images.
Composant Galerie
Un composant de galerie réactif utilisant Tailwind CSS avec un design Skeuomorphism, une palette de couleurs pastel et une complexité modérée à des fins de médias sociaux. Inclut la prise en charge du mode sombre et utilise picsum.photos pour les images et randomuser.me pour les avatars.
JewelTone_Photography_Gallery
Un composant de galerie de photographie complexe et réactif avec des couleurs de bijou et une mise en page typographique épurée, avec des systèmes de grille et la prise en charge du mode sombre. Idéal pour les portfolios de photographes.