Composant de la liste de souhaits
Un composant de liste de souhaits réactif avec le style de conception Glassmorphism utilisant Tailwind CSS, prenant en charge le mode sombre avec des effets de verre dépoli et des images de remplacement aléatoires.
HTML Code
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
<div class="bg-white dark:bg-gray-800 backdrop-blur-md bg-opacity-30 rounded-lg shadow-lg p-6 w-11/12 max-w-md">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 text-center mb-4">My Wishlist</h2>
<ul class="space-y-4">
<li class="flex items-center justify-between p-4 rounded-lg bg-white dark:bg-gray-700 shadow-md">
<img src="https://picsum.photos/50/50" alt="Item Image" class="rounded-full" />
<div class="flex-grow mx-4">
<h3 class="font-semibold text-gray-800 dark:text-gray-200">Item Title</h3>
<p class="text-gray-600 dark:text-gray-400">Description of the item goes here.</p>
</div>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
</li>
<li class="flex items-center justify-between p-4 rounded-lg bg-white dark:bg-gray-700 shadow-md">
<img src="https://picsum.photos/50/50" alt="Item Image" class="rounded-full" />
<div class="flex-grow mx-4">
<h3 class="font-semibold text-gray-800 dark:text-gray-200">Item Title</h3>
<p class="text-gray-600 dark:text-gray-400">Description of the item goes here.</p>
</div>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
</li>
<li class="flex items-center justify-between p-4 rounded-lg bg-white dark:bg-gray-700 shadow-md">
<img src="https://picsum.photos/50/50" alt="Item Image" class="rounded-full" />
<div class="flex-grow mx-4">
<h3 class="font-semibold text-gray-800 dark:text-gray-200">Item Title</h3>
<p class="text-gray-600 dark:text-gray-400">Description of the item goes here.</p>
</div>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
</li>
</ul>
</div>
</div>Composants associés
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 simpliste de la liste de souhaits stylisé avec une approche brutaliste, utilisant une palette de couleurs en niveaux de gris, conçu pour mettre en valeur le travail ou les produits.
Composant de la liste de souhaits
Un composant simple de liste de souhaits e-commerce avec des micro-interactions et une palette de couleurs en niveaux de gris, optimisé pour le responsive design et la prise en charge du mode sombre.