Composant de la liste de souhaits
Un composant de liste de souhaits minimaliste / plat avec des effets réactifs et la prise en charge du thème sombre.
HTML Code
<div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
<h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">My Wishlist</h2>
<div class="space-y-4">
<div class="flex items-center">
<img class="w-16 h-16 object-cover rounded mr-4" src="https://picsum.photos/id/1018/100/100" alt="Product image">
<div class="flex-grow">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Product Name 1</h3>
<p class="text-gray-600 dark:text-gray-400">$19.99</p>
</div>
<button class="text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-600">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div class="flex items-center">
<img class="w-16 h-16 object-cover rounded mr-4" src="https://picsum.photos/id/1015/100/100" alt="Product image">
<div class="flex-grow">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Product Name 2</h3>
<p class="text-gray-600 dark:text-gray-400">$29.99</p>
</div>
<button class="text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-600">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>Composants associés
Composant de la liste de souhaits
Composant de liste de souhaits de skeuomorphisme complexe avec schéma de couleurs complémentaires, à des fins de médias sociaux. Réactif, avec prise en charge du thème 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.
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.