Composant de la liste de souhaits
Un composant de liste de souhaits avec un style de conception 3D, une palette de couleurs pastel et une conception réactive pour les sites Web d’entreprise, prenant en charge le mode sombre.
HTML Code
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg max-w-md mx-auto p-6">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-100">My Wishlist</h2>
<ul class="divide-y divide-gray-200 dark:divide-gray-700">
<li class="py-4 flex items-center space-x-4 hover:bg-gray-100 dark:hover:bg-gray-700 transition duration-200">
<img class="w-16 h-16 rounded-lg shadow-md" src="https://picsum.photos/seed/wishlist1/100/100" alt="Wishlist Item 1" />
<div>
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-100">Item 1</h3>
<p class="text-gray-500 dark:text-gray-400">Description of Item 1</p>
<span class="text-purple-600 dark:text-purple-400">$29.99</span>
</div>
</li>
<li class="py-4 flex items-center space-x-4 hover:bg-gray-100 dark:hover:bg-gray-700 transition duration-200">
<img class="w-16 h-16 rounded-lg shadow-md" src="https://picsum.photos/seed/wishlist2/100/100" alt="Wishlist Item 2" />
<div>
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-100">Item 2</h3>
<p class="text-gray-500 dark:text-gray-400">Description of Item 2</p>
<span class="text-purple-600 dark:text-purple-400">$39.99</span>
</div>
</li>
<li class="py-4 flex items-center space-x-4 hover:bg-gray-100 dark:hover:bg-gray-700 transition duration-200">
<img class="w-16 h-16 rounded-lg shadow-md" src="https://picsum.photos/seed/wishlist3/100/100" alt="Wishlist Item 3" />
<div>
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-100">Item 3</h3>
<p class="text-gray-500 dark:text-gray-400">Description of Item 3</p>
<span class="text-purple-600 dark:text-purple-400">$49.99</span>
</div>
</li>
</ul>
<div class="mt-4 flex justify-between items-center">
<span class="text-gray-700 dark:text-gray-300">Total:</span>
<span class="text-purple-600 dark:text-purple-400 font-bold">$119.97</span>
</div>
<button class="mt-4 w-full bg-purple-500 dark:bg-purple-600 text-white font-semibold py-2 rounded hover:bg-purple-600 dark:hover:bg-purple-700 transition duration-200">Checkout</button>
</div>Composants associés
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.
Composant de la liste de souhaits
Composant de liste de souhaits réactif avec prise en charge du mode sombre à l’aide de Tailwind CSS. Affichage d’une liste d’articles avec des images, des titres, des prix et des boutons de suppression. Conçu pour un tableau de bord aux couleurs vives.
Composant de la liste de souhaits
Un composant de liste de souhaits minimaliste avec des images de remplacement et un thème sombre.