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.
HTML Code
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 p-4">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/200/300" alt="Product Image">
<div class="p-4">
<h2 class="text-gray-800 dark:text-gray-200 text-lg font-semibold">Product Title</h2>
<p class="text-gray-600 dark:text-gray-400">A brief description of the product goes here.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-gray-800 dark:text-gray-200 text-xl font-bold">$99.99</span>
<button class="bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 rounded px-4 py-2 hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-300">Add to Cart</button>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/200/300?random=2" alt="Product Image">
<div class="p-4">
<h2 class="text-gray-800 dark:text-gray-200 text-lg font-semibold">Product Title 2</h2>
<p class="text-gray-600 dark:text-gray-400">A brief description of the second product goes here.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-gray-800 dark:text-gray-200 text-xl font-bold">$89.99</span>
<button class="bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 rounded px-4 py-2 hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-300">Add to Cart</button>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/200/300?random=3" alt="Product Image">
<div class="p-4">
<h2 class="text-gray-800 dark:text-gray-200 text-lg font-semibold">Product Title 3</h2>
<p class="text-gray-600 dark:text-gray-400">A brief description of the third product goes here.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-gray-800 dark:text-gray-200 text-xl font-bold">$79.99</span>
<button class="bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 rounded px-4 py-2 hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-300">Add to Cart</button>
</div>
</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 Produits Neumorphic - Palette Rétro
Il s’agit d’un composant complexe et réactif conçu avec un style d’interface utilisateur Neumorphic doux, utilisant une palette de couleurs rétro/vintage discrète. Les fonctionnalités incluent la prise en charge du mode sombre, des ombres subtiles pour l’effet d’extrusion et du HTML sémantique pour l’accessibilité. Convient pour la lecture et la consommation de contenu, comme un blog ou l’affichage de contenu.
Composant Cartes de produit
Un composant complexe de la carte produit avec des micro-interactions attrayantes et une palette de couleurs monochromatiques. Conçu pour les sites Web d’entreprise, il est réactif et prend en charge le mode sombre.