Composant de la liste de souhaits
Un composant de liste de souhaits simple et réactif pour les sites Web d’entreprise/d’entreprise avec des micro-interactions. Dispose d’un schéma de couleurs analogue (bleu-vert-sarcelle), d’une prise en charge du thème sombre et de subtiles animations de survol. Le composant affiche les éléments de la liste de souhaits avec des images de produits, des noms, des prix et des boutons d’action.
HTML Code
<div class="max-w-md mx-auto bg-gradient-to-br from-blue-50 to-teal-50 dark:from-slate-800 dark:to-slate-900 rounded-lg shadow-md p-6 transition-all duration-300 ease-in-out hover:shadow-lg">
<div class="flex items-center justify-between mb-6">
<h2 class="text-xl font-semibold text-blue-700 dark:text-teal-400 transition-colors duration-300">Your Wishlist</h2>
<span class="bg-teal-100 dark:bg-teal-900 text-teal-600 dark:text-teal-300 text-sm px-3 py-1 rounded-full transition-all duration-300 hover:scale-105">3 items</span>
</div>
<ul class="space-y-4">
<!-- Wishlist Item 1 -->
<li class="flex items-center border-b border-blue-100 dark:border-slate-700 pb-4 group">
<div class="relative w-16 h-16 overflow-hidden rounded-md mr-4 transition-transform duration-300 group-hover:scale-105">
<img src="https://picsum.photos/200/200?random=1" alt="Product" class="object-cover w-full h-full">
<div class="absolute inset-0 bg-gradient-to-t from-teal-500/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
</div>
<div class="flex-grow">
<h3 class="text-blue-800 dark:text-blue-300 font-medium transition-colors duration-300">Business Analytics Tool</h3>
<p class="text-teal-600 dark:text-teal-400 text-sm">$199.99</p>
</div>
<div class="flex space-x-2">
<button class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-200 transition-all duration-300 hover:scale-110">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
</svg>
</button>
<button class="text-teal-600 dark:text-teal-400 hover:text-teal-800 dark:hover:text-teal-200 transition-all duration-300 hover:scale-110">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
</button>
</div>
</li>
<!-- Wishlist Item 2 -->
<li class="flex items-center border-b border-blue-100 dark:border-slate-700 pb-4 group">
<div class="relative w-16 h-16 overflow-hidden rounded-md mr-4 transition-transform duration-300 group-hover:scale-105">
<img src="https://picsum.photos/200/200?random=2" alt="Product" class="object-cover w-full h-full">
<div class="absolute inset-0 bg-gradient-to-t from-teal-500/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
</div>
<div class="flex-grow">
<h3 class="text-blue-800 dark:text-blue-300 font-medium transition-colors duration-300">CRM Software Premium</h3>
<p class="text-teal-600 dark:text-teal-400 text-sm">$299.99</p>
</div>
<div class="flex space-x-2">
<button class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-200 transition-all duration-300 hover:scale-110">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
</svg>
</button>
<button class="text-teal-600 dark:text-teal-400 hover:text-teal-800 dark:hover:text-teal-200 transition-all duration-300 hover:scale-110">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
</button>
</div>
</li>
<!-- Wishlist Item 3 -->
<li class="flex items-center pb-2 group">
<div class="relative w-16 h-16 overflow-hidden rounded-md mr-4 transition-transform duration-300 group-hover:scale-105">
<img src="https://picsum.photos/200/200?random=3" alt="Product" class="object-cover w-full h-full">
<div class="absolute inset-0 bg-gradient-to-t from-teal-500/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
</div>
<div class="flex-grow">
<h3 class="text-blue-800 dark:text-blue-300 font-medium transition-colors duration-300">Dashboard Template Bundle</h3>
<p class="text-teal-600 dark:text-teal-400 text-sm">$149.99</p>
</div>
<div class="flex space-x-2">
<button class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-200 transition-all duration-300 hover:scale-110">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
</svg>
</button>
<button class="text-teal-600 dark:text-teal-400 hover:text-teal-800 dark:hover:text-teal-200 transition-all duration-300 hover:scale-110">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
</button>
</div>
</li>
</ul>
<div class="mt-6 flex justify-between items-center">
<button class="px-4 py-2 bg-gradient-to-r from-blue-500 to-teal-500 text-white rounded-lg shadow-sm hover:shadow-md transition-all duration-300 hover:translate-y-[-2px] focus:outline-none focus:ring-2 focus:ring-teal-400 focus:ring-offset-2 dark:focus:ring-offset-slate-900">
Add All to Cart
</button>
<p class="text-blue-700 dark:text-blue-300 font-medium">Total: <span class="text-teal-600 dark:text-teal-400">$649.97</span></p>
</div>
</div>Composants associés
Composant de la liste de souhaits - Material Design
Un composant de liste de souhaits inspiré du design matériel avec un design réactif et une prise en charge du thème sombre.
Composant de la liste de souhaits
Un composant de liste de souhaits de style brutaliste pour les sites Web d’entreprise, avec une palette de couleurs en niveaux de gris et une complexité modérée. Conception réactive avec prise en charge du mode sombre à l’aide des classes CSS Tailwind.
Composant de la liste de souhaits
Un composant de liste de souhaits réactif conçu en mode sombre à l’aide de Tailwind CSS. Il dispose d’une disposition de carte pour les éléments avec des images, des descriptions et des avatars d’utilisateur, prenant en charge le thème sombre et les effets réactifs.