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
Tableau de bord des composants fonctionnels
Un composant de tableau de bord réactif conçu selon les principes de Material Design et une palette de couleurs monochromatiques. Il propose des mises en page basées sur une grille, des éléments interactifs et la prise en charge du thème sombre à l’aide de Tailwind CSS.
Neon_Glow_Marketplace_Component
Un composant de marché complexe avec des éléments lumineux et lumineux et une palette de couleurs triadique, conçu pour les plates-formes multifournisseurs. Les fonctionnalités incluent des cartes de produits, des catégories, des recherches et des profils d’utilisateurs, tous réactifs et avec prise en charge du mode sombre.
Composante fonctionnelle des soins de santé
Un composant réactif et thématique pour les applications de santé, avec un design industriel, des couleurs sourdes et la prise en charge du mode sombre. Affiche les données du patient/capteur avec des actions rapides.