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.
HTML Code
<div class="bg-gray-900 text-gray-200 min-h-screen p-8">
<div class="max-w-4xl mx-auto">
<h2 class="text-2xl font-bold mb-6 text-purple-400">My Wishlist</h2>
<div class="space-y-6">
<!-- Wishlist Item 1 -->
<div class="flex flex-col md:flex-row items-center bg-gray-800 p-4 rounded-lg shadow-lg">
<img src="https://picsum.photos/seed/item1/150/100" alt="Product Image" class="w-full md:w-32 h-auto md:h-24 object-cover rounded-md mb-4 md:mb-0 md:mr-6">
<div class="flex-grow">
<h3 class="text-xl font-semibold text-teal-400">Vibrant Product Title 1</h3>
<p class="text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="text-lg font-bold mt-2 text-orange-400">$199.99</p>
</div>
<button class="mt-4 md:mt-0 bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">Remove</button>
</div>
<!-- Wishlist Item 2 -->
<div class="flex flex-col md:flex-row items-center bg-gray-800 p-4 rounded-lg shadow-lg">
<img src="https://picsum.photos/seed/item2/150/100" alt="Product Image" class="w-full md:w-32 h-auto md:h-24 object-cover rounded-md mb-4 md:mb-0 md:mr-6">
<div class="flex-grow">
<h3 class="text-xl font-semibold text-cyan-400">Exciting Product Title 2</h3>
<p class="text-gray-400">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="text-lg font-bold mt-2 text-lime-400">$249.50</p>
</div>
<button class="mt-4 md:mt-0 bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">Remove</button>
</div>
<!-- Wishlist Item 3 -->
<div class="flex flex-col md:flex-row items-center bg-gray-800 p-4 rounded-lg shadow-lg">
<img src="https://picsum.photos/seed/item3/150/100" alt="Product Image" class="w-full md:w-32 h-auto md:h-24 object-cover rounded-md mb-4 md:mb-0 md:mr-6">
<div class="flex-grow">
<h3 class="text-xl font-semibold text-pink-400">Dynamic Product Title 3</h3>
<p class="text-gray-400">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
<p class="text-lg font-bold mt-2 text-yellow-400">$99.00</p>
</div>
<button class="mt-4 md:mt-0 bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">Remove</button>
</div>
</div>
</div>
</div>Composants associés
Composant de la liste de souhaits
Un composant de liste de souhaits réactif conçu avec une esthétique rétro/vintage, avec une palette de couleurs triadique et une prise en charge du mode sombre, idéal pour présenter des travaux ou des produits.
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 la liste de souhaits en mode sombre avec un design monochromatique simple pour le tableau de bord