Composant Cartes de produits
Des fiches produits simples et réactives avec un design aquarelle/artistique, une palette de couleurs complémentaire et une prise en charge complète du mode sombre, adaptées à un portefeuille.
HTML Code
<div class="bg-gradient-to-br from-purple-50 via-pink-50 to-orange-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 p-6 sm:p-8 lg:p-12 min-h-screen font-sans">
<div class="container mx-auto px-4">
<h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-center mb-12 text-gray-800 dark:text-gray-100 drop-shadow-lg leading-tight">
Our Artistic Creations
</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Product Card 1 -->
<div class="group relative rounded-3xl overflow-hidden shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out
transform hover:-translate-y-2
bg-white dark:bg-gray-800
border border-pink-200 dark:border-pink-800
bg-blend-multiply bg-cover bg-center"
style="background-image: url('https://picsum.photos/id/107/600/400?blur=1');">
<div class="absolute inset-0 bg-gradient-to-t from-pink-300/80 via-transparent to-transparent dark:from-pink-900/80 group-hover:from-pink-400/90 group-hover:dark:from-pink-800/90 transition-all duration-300"></div>
<img src="https://picsum.photos/id/107/600/400" alt="Abstract Painting" class="w-full h-64 object-cover object-center group-hover:scale-105 transition-transform duration-300 mix-blend-multiply opacity-80 group-hover:opacity-100" />
<div class="relative p-6 pt-52 text-white dark:text-gray-100 flex flex-col justify-end min-h-[250px]">
<h3 class="text-2xl font-bold mb-2 drop-shadow-md">Sunset Reflection</h3>
<p class="text-sm mb-4 opacity-90 drop-shadow-sm">A vibrant watercolor capturing the essence of a serene sunset over water.</p>
<div class="flex items-center justify-between text-lg font-semibold">
<span>$120.00</span>
<button class="px-4 py-2 bg-gradient-to-r from-pink-500 to-red-500 hover:from-pink-600 hover:to-red-600 dark:from-pink-700 dark:to-red-700 dark:hover:from-pink-800 dark:hover:to-red-800 text-white rounded-full transition-all duration-300 transform hover:scale-105 shadow-lg">
View Details
</button>
</div>
</div>
</div>
<!-- Product Card 2 -->
<div class="group relative rounded-3xl overflow-hidden shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out
transform hover:-translate-y-2
bg-white dark:bg-gray-800
border border-orange-200 dark:border-orange-800
bg-blend-multiply bg-cover bg-center"
style="background-image: url('https://picsum.photos/id/105/600/400?blur=1');">
<div class="absolute inset-0 bg-gradient-to-t from-orange-300/80 via-transparent to-transparent dark:from-orange-900/80 group-hover:from-orange-400/90 group-hover:dark:from-orange-800/90 transition-all duration-300"></div>
<img src="https://picsum.photos/id/105/600/400" alt="Figurative Sculpture" class="w-full h-64 object-cover object-center group-hover:scale-105 transition-transform duration-300 mix-blend-multiply opacity-80 group-hover:opacity-100" />
<div class="relative p-6 pt-52 text-white dark:text-gray-100 flex flex-col justify-end min-h-[250px]">
<h3 class="text-2xl font-bold mb-2 drop-shadow-md">Forest Whisper</h3>
<p class="text-sm mb-4 opacity-90 drop-shadow-sm">An impressionistic oil painting capturing the mysterious allure of a deep forest.</p>
<div class="flex items-center justify-between text-lg font-semibold">
<span>$180.00</span>
<button class="px-4 py-2 bg-gradient-to-r from-orange-500 to-yellow-500 hover:from-orange-600 hover:to-yellow-600 dark:from-orange-700 dark:to-yellow-700 dark:hover:from-orange-800 dark:hover:to-yellow-800 text-white rounded-full transition-all duration-300 transform hover:scale-105 shadow-lg">
View Details
</button>
</div>
</div>
</div>
<!-- Product Card 3 -->
<div class="group relative rounded-3xl overflow-hidden shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out
transform hover:-translate-y-2
bg-white dark:bg-gray-800
border border-purple-200 dark:border-purple-800
bg-blend-multiply bg-cover bg-center"
style="background-image: url('https://picsum.photos/id/106/600/400?blur=1');">
<div class="absolute inset-0 bg-gradient-to-t from-purple-300/80 via-transparent to-transparent dark:from-purple-900/80 group-hover:from-purple-400/90 group-hover:dark:from-purple-800/90 transition-all duration-300"></div>
<img src="https://picsum.photos/id/106/600/400" alt="Abstract Design" class="w-full h-64 object-cover object-center group-hover:scale-105 transition-transform duration-300 mix-blend-multiply opacity-80 group-hover:opacity-100" />
<div class="relative p-6 pt-52 text-white dark:text-gray-100 flex flex-col justify-end min-h-[250px]">
<h3 class="text-2xl font-bold mb-2 drop-shadow-md">Urban Energy</h3>
<p class="text-sm mb-4 opacity-90 drop-shadow-sm">A dynamic acrylic work reflecting the vibrant chaos and beauty of city life.</p>
<div class="flex items-center justify-between text-lg font-semibold">
<span>$95.00</span>
<button class="px-4 py-2 bg-gradient-to-r from-purple-500 to-indigo-500 hover:from-purple-600 hover:to-indigo-600 dark:from-purple-700 dark:to-indigo-700 dark:hover:from-purple-800 dark:hover:to-indigo-800 text-white rounded-full transition-all duration-300 transform hover:scale-105 shadow-lg">
View Details
</button>
</div>
</div>
</div>
</div>
</div>
</div>Composants associés
ArtDeco_ProductCards_Music
Composant simple de cartes produit réactives avec une esthétique Art déco, avec des motifs géométriques et une palette de couleurs coucher de soleil/chaud, adapté aux plateformes musicales et audio. Inclut la prise en charge du mode sombre.
Composant Cartes Produits Skeuomorphic
Composant de cartes produit simple et réactif avec un design skeuomorphe en niveaux de gris, adapté aux sites Web d’entreprise. Inclut la prise en charge du mode sombre.
Composant Cartes de produit
Un composant de cartes produit de style brutaliste avec des effets réactifs et une prise en charge du thème sombre à l’aide de Tailwind CSS.