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.
HTML Code
<div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold text-white mb-4">Product Title</h2>
<div class="flex items-center mb-4">
<img src="https://picsum.photos/id/100/100/100" alt="Product Image" class="w-24 h-24 rounded-lg shadow-md">
<div class="ml-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-md">
<p class="text-gray-400 text-sm">By: Author Name</p>
</div>
</div>
<p class="text-gray-300 mb-4">This is a short description of the product. It highlights the key features and benefits of the item in a concise manner.</p>
<div class="flex justify-between items-center">
<span class="text-lg text-vibrant-orange-500 font-semibold">$99.99</span>
<button class="bg-vibrant-green-500 text-white px-4 py-2 rounded hover:bg-vibrant-green-400 transition duration-150 ease-in-out">Add to Cart</button>
</div>
<div class="mt-4">
<button class="bg-gray-700 dark:bg-gray-600 text-white px-4 py-2 rounded hover:bg-gray-600 transition duration-150 ease-in-out">Details</button>
</div>
</div>
<div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-lg mt-4">
<h2 class="text-2xl font-bold text-white mb-4">Product Title</h2>
<div class="flex items-center mb-4">
<img src="https://picsum.photos/id/101/100/100" alt="Product Image" class="w-24 h-24 rounded-lg shadow-md">
<div class="ml-4">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-md">
<p class="text-gray-400 text-sm">By: Author Name</p>
</div>
</div>
<p class="text-gray-300 mb-4">This is a short description of the product. It highlights the key features and benefits of the item in a concise manner.</p>
<div class="flex justify-between items-center">
<span class="text-lg text-vibrant-orange-500 font-semibold">$79.99</span>
<button class="bg-vibrant-green-500 text-white px-4 py-2 rounded hover:bg-vibrant-green-400 transition duration-150 ease-in-out">Add to Cart</button>
</div>
<div class="mt-4">
<button class="bg-gray-700 dark:bg-gray-600 text-white px-4 py-2 rounded hover:bg-gray-600 transition duration-150 ease-in-out">Details</button>
</div>
</div>Composants associés
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 produit
Un composant de cartes produit réactif conçu avec des éléments 3D et une palette de couleurs vives, intégrant un thème sombre pour la consommation de blog et de contenu. Il présente une complexité moyenne avec des éléments interactifs pour l’engagement de l’utilisateur.
Composant Cartes de produit
Un composant de carte produit de style brutalisme avec un contraste élevé, des effets réactifs et une prise en charge du mode sombre.