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 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 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
Composant de carte de produit avec style brutalisme, schéma de couleurs monochromatique, niveau de complexité complexe à des fins de commerce électronique.