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.
HTML Code
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-md mx-auto">
<h2 class="text-2xl font-bold text-black dark:text-white mb-4">Wishlist</h2>
<ul class="space-y-4">
<li class="border-b border-gray-300 dark:border-gray-700 pb-4">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/100/100" alt="Wishlist Item" class="w-16 h-16 rounded-lg">
<div class="flex-1">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Product 1</h3>
<p class="text-gray-600 dark:text-gray-400">Description for product 1.</p>
</div>
<button class="bg-black text-white px-4 py-2 rounded hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-300">Add</button>
</div>
</li>
<li class="border-b border-gray-300 dark:border-gray-700 pb-4">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/100/100" alt="Wishlist Item" class="w-16 h-16 rounded-lg">
<div class="flex-1">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Product 2</h3>
<p class="text-gray-600 dark:text-gray-400">Description for product 2.</p>
</div>
<button class="bg-black text-white px-4 py-2 rounded hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-300">Add</button>
</div>
</li>
<li class="border-b border-gray-300 dark:border-gray-700 pb-4">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/100/100" alt="Wishlist Item" class="w-16 h-16 rounded-lg">
<div class="flex-1">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Product 3</h3>
<p class="text-gray-600 dark:text-gray-400">Description for product 3.</p>
</div>
<button class="bg-black text-white px-4 py-2 rounded hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-300">Add</button>
</div>
</li>
</ul>
</div>Composants associés
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.
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 réactif conçu avec des éléments skeuomorphes et des couleurs complémentaires pour un tableau de bord à thème sombre.