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
Paper_Print_Media_Card
Une carte multimédia simple et réactive avec un design inspiré du papier/de l’impression et une palette de couleurs pastel, avec prise en charge du mode sombre. Idéal pour les plateformes de divertissement ou de médias.
Composants fonctionnels
Un composant de médias sociaux conçu avec le style Brutalism et les couleurs pastel, doté d’une interface complexe pour les interactions, avec prise en charge du mode sombre.
Composant fonctionnel du commerce électronique
Composant de commerce électronique de conception plate minimaliste avec palette de couleurs triadique et prise en charge réactive du mode sombre.