Composant de la liste de souhaits
Composant de liste de souhaits avec conception 3D, schéma de couleurs analogue et complexité simple à des fins de tableau de bord, avec conception réactive et prise en charge du thème sombre.
HTML Code
<div class="dark:bg-gray-900 bg-gray-100 min-h-screen p-4">
<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden md:max-w-2xl transform transition-all duration-300 hover:scale-105">
<div class="md:flex">
<div class="md:flex-shrink-0">
<img class="h-48 w-full object-cover md:w-48 transform translate-x-2 translate-y-2 rotate-3 shadow-lg rounded-lg" src="https://picsum.photos/seed/wishlist/400/300" alt="Product image">
</div>
<div class="p-8">
<div class="uppercase tracking-wide text-sm text-indigo-500 dark:text-indigo-300 font-semibold">Wishlist Item</div>
<a href="#" class="block mt-1 text-lg leading-tight font-medium text-black dark:text-white hover:underline">Awesome Product Name</a>
<p class="mt-2 text-gray-500 dark:text-gray-400">A short description of the product, highlighting its key features and benefits.</p>
<div class="mt-4 flex items-center justify-between">
<span class="text-xl font-bold text-gray-900 dark:text-white">$29.99</span>
<button class="bg-indigo-500 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-full shadow-lg transform transition-all duration-300 hover:scale-110">
Add to Cart
</button>
</div>
</div>
</div>
</div>
</div>Composants associés
Composant de la liste de souhaits
Un composant de liste de souhaits minimaliste avec des images de remplacement et un thème sombre.
Composant de la liste de souhaits
Un composant de liste de souhaits réactif conçu pour un tableau de bord, avec une palette de couleurs monochromatiques et un style de conception 3D.
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.