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.
HTML Code
<div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/400/300" alt="Product Image">
<div class="p-4">
<h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200">Product Title</h2>
<p class="text-gray-600 dark:text-gray-400 mt-2">This is a brief description of the product showcasing its features and benefits.</p>
<div class="mt-4">
<a href="#" class="bg-gray-800 text-white font-bold py-2 px-4 rounded hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600">View Product</a>
</div>
</div>
</div>
<div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden mt-6">
<img class="w-full h-48 object-cover" src="https://picsum.photos/400/301" alt="Product Image">
<div class="p-4">
<h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200">Product Title</h2>
<p class="text-gray-600 dark:text-gray-400 mt-2">This is a brief description of the product showcasing its features and benefits.</p>
<div class="mt-4">
<a href="#" class="bg-gray-800 text-white font-bold py-2 px-4 rounded hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600">View Product</a>
</div>
</div>
</div>
<div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden mt-6">
<img class="w-full h-48 object-cover" src="https://picsum.photos/400/302" alt="Product Image">
<div class="p-4">
<h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200">Product Title</h2>
<p class="text-gray-600 dark:text-gray-400 mt-2">This is a brief description of the product showcasing its features and benefits.</p>
<div class="mt-4">
<a href="#" class="bg-gray-800 text-white font-bold py-2 px-4 rounded hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600">View Product</a>
</div>
</div>
</div>
<div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden mt-6">
<div class="flex items-center p-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
<div class="ml-3">
<h3 class="text-gray-800 dark:text-gray-200 font-bold">User Name</h3>
<p class="text-gray-600 dark:text-gray-400">Product Owner</p>
</div>
</div>
</div>Composants associés
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.
Composant Cartes de produit avec interface utilisateur en mode sombre
Composant de cartes de produit avec interface utilisateur en mode sombre et effets réactifs à l’aide de Tailwind CSS.
Composant Cartes de produit
Un composant de cartes produit réactif conçu dans un style brutaliste avec Tailwind CSS, avec prise en charge du thème sombre et utilisant des images de remplacement.