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 de style brutaliste pour les sites Web d’entreprise, avec une palette de couleurs en niveaux de gris et une complexité modérée. Conception réactive avec prise en charge du mode sombre à l’aide des classes CSS Tailwind.
Glassmorphism Wishlist Component - Agriculture/Élevage
Un composant de liste de souhaits réactif avec un style de conception glassmorphism, une palette de couleurs pastel et adapté aux sites Web agricoles. Comprend des éléments translucides givrés ressemblant à du verre avec des effets de flou, du HTML sémantique et une prise en charge complète du mode sombre.
Composant de la liste de souhaits Bauhaus
Un composant de liste de souhaits simple et réactif pour les produits de mode/beauté conçus selon les principes du Bauhaus, avec des couleurs neutres froides et la prise en charge du mode sombre.