Composant Cartes de produit
Un composant de carte produit réactif conçu dans un style minimaliste avec une palette de couleurs pastel, adapté aux sites Web d’entreprise ou d’entreprise, et inclut la prise en charge du mode sombre.
HTML Code
<div class="container mx-auto p-6">
<h2 class="text-2xl font-semibold mb-6 text-gray-800 dark:text-gray-200">Product Cards</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-shadow duration-300 hover:shadow-xl">
<div class="p-4">
<img src="https://picsum.photos/300/200" alt="Product Image" class="w-full h-48 object-cover rounded-md">
</div>
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title</h3>
<p class="text-gray-600 dark:text-gray-400 mt-2">This is a brief description of the product, highlighting its features and benefits in a simple and clear manner.</p>
</div>
<div class="p-4 border-t border-gray-200 dark:border-gray-700">
<div class="flex items-center justify-between">
<span class="text-gray-800 dark:text-gray-200 font-semibold">$99.99</span>
<button class="bg-primary text-white px-4 py-2 rounded-md hover:bg-opacity-80 transition">
Add to Cart
</button>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-shadow duration-300 hover:shadow-xl">
<div class="p-4">
<img src="https://picsum.photos/300/201" alt="Product Image" class="w-full h-48 object-cover rounded-md">
</div>
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title</h3>
<p class="text-gray-600 dark:text-gray-400 mt-2">This is a brief description of the product, highlighting its features and benefits in a simple and clear manner.</p>
</div>
<div class="p-4 border-t border-gray-200 dark:border-gray-700">
<div class="flex items-center justify-between">
<span class="text-gray-800 dark:text-gray-200 font-semibold">$99.99</span>
<button class="bg-primary text-white px-4 py-2 rounded-md hover:bg-opacity-80 transition">
Add to Cart
</button>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-shadow duration-300 hover:shadow-xl">
<div class="p-4">
<img src="https://picsum.photos/300/202" alt="Product Image" class="w-full h-48 object-cover rounded-md">
</div>
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title</h3>
<p class="text-gray-600 dark:text-gray-400 mt-2">This is a brief description of the product, highlighting its features and benefits in a simple and clear manner.</p>
</div>
<div class="p-4 border-t border-gray-200 dark:border-gray-700">
<div class="flex items-center justify-between">
<span class="text-gray-800 dark:text-gray-200 font-semibold">$99.99</span>
<button class="bg-primary text-white px-4 py-2 rounded-md hover:bg-opacity-80 transition">
Add to Cart
</button>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-shadow duration-300 hover:shadow-xl">
<div class="p-4">
<img src="https://picsum.photos/300/203" alt="Product Image" class="w-full h-48 object-cover rounded-md">
</div>
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title</h3>
<p class="text-gray-600 dark:text-gray-400 mt-2">This is a brief description of the product, highlighting its features and benefits in a simple and clear manner.</p>
</div>
<div class="p-4 border-t border-gray-200 dark:border-gray-700">
<div class="flex items-center justify-between">
<span class="text-gray-800 dark:text-gray-200 font-semibold">$99.99</span>
<button class="bg-primary text-white px-4 py-2 rounded-md hover:bg-opacity-80 transition">
Add to Cart
</button>
</div>
</div>
</div>
</div>
</div>Composants associés
Composant Cartes de produit
Un composant de carte produit réactif conçu pour le mode sombre, avec des couleurs vives et de multiples éléments interactifs adaptés aux blogs et à la consommation de contenu.
Composant Cartes de produit
Un composant de carte produit simple et réactif avec des micro-interactions, conçu pour les interfaces de médias sociaux à l’aide de Tailwind CSS, prenant en charge le thème sombre et le schéma de couleurs en niveaux de gris.
Composant Cartes de produit
Un composant de carte produit réactif avec une conception 3D, une palette de couleurs analogues et une prise en charge du mode sombre, conçu pour les interfaces de médias sociaux.