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 Produits Skeuomorphic
Composant de cartes produit simple et réactif avec un design skeuomorphe en niveaux de gris, adapté aux sites Web d’entreprise. Inclut la prise en charge du mode sombre.
Composant Cartes de produit
Un composant de carte produit réactif conçu dans le style Material Design, avec une palette de couleurs en niveaux de gris. Il comprend une image, un titre, une description et un bouton avec prise en charge du mode sombre à l’aide de Tailwind CSS.
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.