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
Cartes produits Art Déco Candy
Un composant de cartes de produits réactif avec un design inspiré de l’Art déco et une palette de couleurs bonbon gaie, adapté aux systèmes de réservation et de réservation. Inclut la prise en charge du mode sombre.
Composant Cartes de produits
Un composant de carte produit réactif avec un design rétro/vintage, une palette de couleurs analogue et une prise en charge du thème sombre, adapté à un tableau de bord. La conception comprend des espaces réservés pour les images et les détails du produit.
Composant Cartes de produit
Un composant de carte produit réactif conçu dans le style Material Design, avec une palette de couleurs en niveaux de gris. Il comprend une image, un titre, une description et un bouton avec prise en charge du mode sombre à l’aide de Tailwind CSS.