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.
HTML Code
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
<div class="bg-white bg-opacity-30 backdrop-blur-lg rounded-lg p-4 shadow-lg transition duration-300 ease-in-out transform hover:scale-105 dark:bg-gray-800 dark:bg-opacity-30">
<img src="https://picsum.photos/200/300?random=1" alt="Product Image" class="w-full h-32 object-cover rounded-lg mb-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-white">Product Title 1</h2>
<p class="text-gray-600 dark:text-gray-300">This is a short description of the product that highlights its features.</p>
<div class="mt-4 flex justify-between items-center">
<span class="text-lg font-bold text-gray-800 dark:text-white">$49.99</span>
<button class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition duration-200">Add to Cart</button>
</div>
</div>
<div class="bg-white bg-opacity-30 backdrop-blur-lg rounded-lg p-4 shadow-lg transition duration-300 ease-in-out transform hover:scale-105 dark:bg-gray-800 dark:bg-opacity-30">
<img src="https://picsum.photos/200/300?random=2" alt="Product Image" class="w-full h-32 object-cover rounded-lg mb-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-white">Product Title 2</h2>
<p class="text-gray-600 dark:text-gray-300">This is a short description of the product that highlights its features.</p>
<div class="mt-4 flex justify-between items-center">
<span class="text-lg font-bold text-gray-800 dark:text-white">$59.99</span>
<button class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition duration-200">Add to Cart</button>
</div>
</div>
<div class="bg-white bg-opacity-30 backdrop-blur-lg rounded-lg p-4 shadow-lg transition duration-300 ease-in-out transform hover:scale-105 dark:bg-gray-800 dark:bg-opacity-30">
<img src="https://picsum.photos/200/300?random=3" alt="Product Image" class="w-full h-32 object-cover rounded-lg mb-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-white">Product Title 3</h2>
<p class="text-gray-600 dark:text-gray-300">This is a short description of the product that highlights its features.</p>
<div class="mt-4 flex justify-between items-center">
<span class="text-lg font-bold text-gray-800 dark:text-white">$39.99</span>
<button class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition duration-200">Add to Cart</button>
</div>
</div>
</div>Composants associés
Composant Fiches Produits - Agriculture/Agriculture
Un composant de fiche produit réactif conçu pour l’agriculture et les sites Web agricoles, avec une typographie épurée, des systèmes de grille et des couleurs d’automne. Inclut la prise en charge du mode sombre.
Composant Cartes de produit avec interface utilisateur en mode sombre
Composant de cartes de produit avec interface utilisateur en mode sombre et effets réactifs à l’aide de Tailwind CSS.
Composant Cartes de produits
Un composant de carte produit réactif avec un style de conception Skeuomorphism, une palette de couleurs de terre et des interactions complexes, adapté à un portefeuille. Il inclut la prise en charge du thème sombre et utilise Tailwind CSS pour le style. Les images proviennent de picsum.photos et les avatars de randomuser.me.