Composant Cartes de produits
Fiches produits réactives avec effet verre dépoli Glassmorphism utilisant des couleurs pastel, avec prise en charge du mode sombre. Convient aux interfaces de médias sociaux.
HTML Code
<div class="flex flex-col min-h-screen bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-900 dark:to-black items-center justify-center p-8">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Product Card 1 -->
<div class="bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 backdrop-filter backdrop-blur-lg rounded-xl shadow-lg p-6 transform transition duration-500 hover:scale-105">
<img src="https://picsum.photos/400/250?random=1" alt="Product Image" class="rounded-lg mb-4">
<h3 class="font-bold text-xl text-gray-800 dark:text-gray-100 mb-2">Pastel Dreams</h3>
<p class="text-gray-700 dark:text-gray-300 text-base mb-4">Embrace the soft hues and gentle vibes with this serene collection.</p>
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-800 dark:text-gray-200 text-sm">John Doe</span>
</div>
<div class="flex justify-between items-center">
<span class="text-lg font-bold text-purple-700 dark:text-purple-300">$29.99</span>
<button class="bg-purple-500 hover:bg-purple-600 text-white font-bold py-2 px-4 rounded-full transition duration-300">View Product</button>
</div>
</div>
<!-- Product Card 2 -->
<div class="bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 backdrop-filter backdrop-blur-lg rounded-xl shadow-lg p-6 transform transition duration-500 hover:scale-105">
<img src="https://picsum.photos/400/250?random=2" alt="Product Image" class="rounded-lg mb-4">
<h3 class="font-bold text-xl text-gray-800 dark:text-gray-100 mb-2">Whispering Lilacs</h3>
<p class="text-gray-700 dark:text-gray-300 text-base mb-4">Delicate and enchanting, perfect for a touch of elegance in your feed.</p>
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-800 dark:text-gray-200 text-sm">Jane Smith</span>
</div>
<div class="flex justify-between items-center">
<span class="text-lg font-bold text-pink-700 dark:text-pink-300">$35.50</span>
<button class="bg-pink-500 hover:bg-pink-600 text-white font-bold py-2 px-4 rounded-full transition duration-300">View Product</button>
</div>
</div>
<!-- Product Card 3 -->
<div class="bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 backdrop-filter backdrop-blur-lg rounded-xl shadow-lg p-6 transform transition duration-500 hover:scale-105">
<img src="https://picsum.photos/400/250?random=3" alt="Product Image" class="rounded-lg mb-4">
<h3 class="font-bold text-xl text-gray-800 dark:text-gray-100 mb-2">Misty Mornings</h3>
<p class="text-gray-700 dark:text-gray-300 text-base mb-4">Soft and inviting, ideal for sharing peaceful moments with your followers.</p>
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-800 dark:text-gray-200 text-sm">Peter Jones</span>
</div>
<div class="flex justify-between items-center">
<span class="text-lg font-bold text-green-700 dark:text-green-300">$22.00</span>
<button class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-full transition duration-300">View Product</button>
</div>
</div>
</div>
</div>Composants associés
Fiches Produit Composant 52
Un composant de carte produit réactif utilisant le style de conception Glassmorphism avec la prise en charge du thème sombre et Tailwind CSS.
Composant Cartes de produit
Un composant de cartes produit réactif conçu avec le style skeuomorphism, la palette de couleurs des tons de terre et la prise en charge du thème sombre. Idéal pour les tableaux de bord.
Composant Cartes de produit
Il s’agit d’un composant complexe et réactif de fiches produits pour les plateformes de divertissement/médias, avec un design organique/inspiré de la nature utilisant une palette forêt/verte. Comprend la prise en charge du mode sombre et des éléments interactifs.