Composant Cartes de produit
Un composant de cartes produit de style brutaliste avec des effets réactifs et une prise en charge du thème sombre à l’aide de Tailwind CSS.
HTML Code
<div class="flex flex-wrap justify-center p-4 bg-gray-100 dark:bg-gray-800">
<div class="max-w-sm rounded-lg overflow-hidden shadow-lg m-4 bg-white dark:bg-gray-900">
<img class="w-full h-48 object-cover" src="https://picsum.photos/400/200?random=1" alt="Product Image">
<div class="p-6">
<h2 class="font-bold text-xl mb-2 text-gray-800 dark:text-gray-200">Product Title 1</h2>
<p class="text-gray-700 dark:text-gray-300">This is a brief description of the product. It is made from high-quality materials and is designed for everyday use.</p>
<div class="mt-4">
<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded-full hover:bg-blue-700">Buy Now</button>
</div>
</div>
</div>
<div class="max-w-sm rounded-lg overflow-hidden shadow-lg m-4 bg-white dark:bg-gray-900">
<img class="w-full h-48 object-cover" src="https://picsum.photos/400/200?random=2" alt="Product Image">
<div class="p-6">
<h2 class="font-bold text-xl mb-2 text-gray-800 dark:text-gray-200">Product Title 2</h2>
<p class="text-gray-700 dark:text-gray-300">This is a brief description of the product. It is made from high-quality materials and is designed for everyday use.</p>
<div class="mt-4">
<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded-full hover:bg-blue-700">Buy Now</button>
</div>
</div>
</div>
<div class="max-w-sm rounded-lg overflow-hidden shadow-lg m-4 bg-white dark:bg-gray-900">
<img class="w-full h-48 object-cover" src="https://picsum.photos/400/200?random=3" alt="Product Image">
<div class="p-6">
<h2 class="font-bold text-xl mb-2 text-gray-800 dark:text-gray-200">Product Title 3</h2>
<p class="text-gray-700 dark:text-gray-300">This is a brief description of the product. It is made from high-quality materials and is designed for everyday use.</p>
<div class="mt-4">
<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded-full hover:bg-blue-700">Buy Now</button>
</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 produit
Un composant de cartes produit réactif avec des micro-interactions, utilisant une palette de couleurs en niveaux de gris et prenant en charge le mode sombre. Idéal pour les blogs ou la consommation de contenu.
Composant Cartes de produits
Un composant simple de carte produit e-commerce conçu dans le style Material Design à l’aide d’une palette de couleurs en niveaux de gris et d’un design réactif avec prise en charge du thème sombre.