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
Wishlist_Component
Un composant complexe, de couleur triadique, de liste de souhaits d’entreprise/professionnel adapté à un tableau de bord, doté d’un design réactif et d’une prise en charge du mode sombre.
Composant de la liste de souhaits
Un composant de liste de souhaits de style 3D pour les interfaces de médias sociaux, avec des éléments interactifs et la prise en charge du mode sombre.
Glassmorphism_Wishlist_Component
Un composant de liste de souhaits complexe et réactif avec un design Glassmorphism avec des tons océan/bleu, optimisé pour les plateformes de rencontres/sociales. Comprend la prise en charge du mode sombre et des éléments interactifs.