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 de style Neumorphisme pour les médias sociaux, avec une palette de couleurs complémentaire. Il comprend un design réactif utilisant Tailwind CSS avec prise en charge du mode sombre. Seules les classes HTML et Tailwind sont utilisées, sans JavaScript. Les images proviennent de picsum.photos et les avatars de randomuser.me.
Composant de la liste de souhaits
Un composant de liste de souhaits réactif conçu pour le mode sombre, adapté aux sites Web d’entreprise. Il comporte des éléments interactifs et une palette de couleurs complémentaire, construite à l’aide de Tailwind CSS.
Composant de la liste de souhaits
Un composant de liste de souhaits réactif avec des éléments 3D et des couleurs pastel, prenant en charge le thème sombre. Il comprend de multiples éléments interactifs adaptés au commerce électronique. Pas de JavaScript, seulement du HTML et du CSS Tailwind.