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
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.
Composant de la liste de souhaits
Un composant de liste de souhaits réactif conçu dans une esthétique rétro/vintage, utilisant une palette de couleurs monochromatiques à des fins de commerce électronique.
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.