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
Composant Cartes de produit
Composant de cartes de produit avec conception 3D, effets réactifs et prise en charge du thème sombre.
Composant Cartes de produit
Un composant de cartes produit réactif conçu avec des éléments 3D et une palette de couleurs vives, intégrant un thème sombre pour la consommation de blog et de contenu. Il présente une complexité moyenne avec des éléments interactifs pour l’engagement de l’utilisateur.
Composant Cartes de produit
Un composant de carte produit réactif avec un design Glassmorphism, une palette de couleurs en niveaux de gris et une prise en charge du thème sombre. Il comprend plusieurs éléments interactifs adaptés aux interfaces de médias sociaux, tels que l’image du produit, le titre, la description, le prix et le bouton d’ajout au panier. La conception utilise des éléments translucides semblables à du verre givré avec des effets de flou. Aucun Javascript n’est utilisé, seulement du HTML avec des classes CSS Tailwind.