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 de produit
Composant de carte de produit avec style brutalisme, schéma de couleurs monochromatique, niveau de complexité complexe à des fins de commerce électronique.
Composant Cartes de produit
Il s’agit d’un composant complexe et réactif de cartes de produits avec un design d’entreprise/professionnel utilisant une palette de couleurs violet/violet, adapté aux actualités ou aux listes de produits de services professionnels. Inclut la prise en charge du mode sombre.