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.
HTML Code
<div class="flex flex-wrap justify-center p-4">
<div class="w-80 m-4 rounded-lg shadow-lg overflow-hidden transform hover:scale-105 transition-transform duration-300">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200" alt="Product Image">
<div class="bg-white dark:bg-gray-800 p-4">
<h2 class="text-gray-800 dark:text-white font-semibold text-xl mb-2">Product Title</h2>
<p class="text-gray-600 dark:text-gray-300 mb-4">Short description of the product goes here. It's engaging and informative.</p>
<div class="flex items-center">
<img class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-700 mr-3" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Author Avatar">
<div class="text-gray-800 dark:text-white">
<p class="text-sm font-medium">Author Name</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Posted on January 1, 2023</p>
</div>
</div>
</div>
</div>
<div class="w-80 m-4 rounded-lg shadow-lg overflow-hidden transform hover:scale-105 transition-transform duration-300">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/201" alt="Product Image">
<div class="bg-white dark:bg-gray-800 p-4">
<h2 class="text-gray-800 dark:text-white font-semibold text-xl mb-2">Product Title</h2>
<p class="text-gray-600 dark:text-gray-300 mb-4">Short description of the product goes here. It's engaging and informative.</p>
<div class="flex items-center">
<img class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-700 mr-3" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Author Avatar">
<div class="text-gray-800 dark:text-white">
<p class="text-sm font-medium">Author Name</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Posted on January 1, 2023</p>
</div>
</div>
</div>
</div>
</div>Composants associés
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.
Composant Cartes de produit
Un composant de carte produit de style brutalisme avec un contraste élevé, des effets réactifs et une prise en charge du mode sombre.
Composant Cartes de produit
Composant de cartes de produit avec conception 3D, effets réactifs et prise en charge du thème sombre.