Carte e-commerce
Composant de carte de commerce électronique réactif avec prise en charge du mode sombre à l’aide des principes Tailwind CSS et Material Design. Dispose d’une palette de couleurs vives avec une complexité modérée, y compris des éléments interactifs tels que des boutons et des effets de survol. Utilise une mise en page basée sur une grille et intègre des ombres pour plus de profondeur.
HTML Code
<div class="dark:bg-gray-800 dark:text-white p-4 rounded-lg shadow-lg grid grid-cols-1 md:grid-cols-2 gap-4"> <div class="relative"> <img class="w-full h-48 object-cover rounded" src="https://picsum.photos/seed/picsum/400/300" alt="Product Image"> <div class="absolute top-2 right-2 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded"> -20% </div> </div> <div class="flex flex-col justify-between"> <div> <h3 class="text-xl font-bold dark:text-white">Product Title</h3> <p class="text-gray-600 dark:text-gray-300">Short product description with vibrant accents.</p> <div class="flex items-center mt-2"> <span class="text-lg font-semibold text-blue-600 dark:text-blue-400">$19.99</span> <span class="text-sm text-gray-500 line-through ml-2">$24.99</span> </div> </div> <div class="flex space-x-2 mt-4"> <button class="flex-grow bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded dark:bg-blue-700 dark:hover:bg-blue-800"> Add to Cart </button> <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded dark:bg-gray-600 dark:hover:bg-gray-700 dark:text-white"> Wishlist </button> </div> </div> </div>Composants associés
Composant Cartes
Un composant de cartes au design minimaliste et plat pour les systèmes de réservation, avec une palette de couleurs arc-en-ciel dégradée. Il est réactif, inclut la prise en charge du mode sombre et utilise des éléments simples pour un look épuré.
Composant Cartes
Composant de carte en mode sombre réactif pour portefeuille avec palette de couleurs pastel.
Composant Cartes
Un composant de carte de blog/contenu réactif conçu avec un style skeuomorphe et des tons de terre. Comprend un titre, une image, une brève description et un avatar pour les informations sur l’auteur. Prend en charge le mode sombre.