Fiche produit e-commerce avec micro-interactions
Une simple carte de produit e-commerce avec une palette de couleurs triadique et des éléments de micro-interaction pour l’ajouter au panier et l’aimer, avec une réactivité et une prise en charge du mode sombre.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
<div class="w-full max-w-sm bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl">
<div class="relative group">
<img class="w-full h-48 object-cover transition-transform duration-300 group-hover:scale-105" src="https://picsum.photos/400/300?random=1" alt="Product Image">
<div class="absolute inset-0 bg-gradient-to-t from-gray-900/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
<button class="flex-1 bg-yellow-500 text-gray-900 py-2 rounded-md font-semibold text-sm opacity-0 group-hover:opacity-100 group-hover:translate-y-0 translate-y-2 transition-all duration-300 hover:bg-yellow-400 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-75">
Quick View
</button>
</div>
</div>
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 truncate">Stylish Summer Dress</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">Women's Apparel</p>
<div class="flex items-center justify-between mt-3 mb-4">
<span class="text-xl font-bold text-teal-600 dark:text-teal-400">$49.99</span>
<div class="flex space-x-2">
<button class="p-2 rounded-full text-gray-400 hover:text-red-500 hover:bg-red-100 dark:hover:bg-red-900 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-75 group">
<svg class="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
</button>
<button class="p-2 rounded-full text-gray-400 hover:text-blue-500 hover:bg-blue-100 dark:hover:bg-blue-900 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 group">
<svg class="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 11h-4V7a1 1 0 00-2 0v4H7a1 1 0 000 2h4v4a1 1 0 002 0v-4h4a1 1 0 000-2z"/></svg>
</button>
</div>
</div>
<button class="w-full bg-blue-600 text-white py-2 rounded-md font-semibold text-sm transition-all duration-300 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 transform hover:scale-105 active:scale-95">
Add to Cart
</button>
</div>
</div>
</div>Composants associés
Composants fonctionnels
Un composant de tableau de bord avec des composants fonctionnels utilisant les principes de conception matérielle, une palette de couleurs analogue et une complexité modérée. Le composant comprend une conception réactive et la prise en charge du thème sombre à l’aide de Tailwind CSS. Aucun JavaScript n’est inclus.
Composants fonctionnels
Composant fonctionnel pour le commerce électronique avec un design réactif et la prise en charge du thème sombre.
Composants fonctionnels
Un composant de portefeuille minimaliste conçu avec Tailwind CSS, avec une palette de couleurs vives et prenant en charge le mode sombre. Ce composant est destiné à présenter des travaux ou des produits et comprend des images et des espaces réservés d’avatar.