Composant de la liste de souhaits
Composant de liste de souhaits rétro / vintage pour le commerce électronique avec schéma de couleurs triadique, complexité simple, conception réactive et prise en charge du thème sombre.
HTML Code
<div class="font-mono bg-gray-100 dark:bg-gray-900 min-h-screen p-8">
<div class="max-w-4xl mx-auto">
<h1 class="text-4xl font-bold text-purple-700 dark:text-purple-300 mb-8 text-center">My Wishlist</h1>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Wishlist Item 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 transform hover:-translate-y-1">
<img src="https://picsum.photos/400/300?random=1" alt="Product Image" class="w-full h-48 object-cover rounded-t-lg">
<div class="p-6">
<h2 class="text-xl font-semibold text-green-600 dark:text-green-400 mb-2">Retro Analog Camera</h2>
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Capture memories in true vintage style. Limited stock!</p>
<div class="flex justify-between items-center">
<span class="text-2xl font-bold text-red-500 dark:text-red-400">$129.99</span>
<button class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded-full transition-colors duration-300">Add to Cart</button>
</div>
</div>
</div>
<!-- Wishlist Item 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 transform hover:-translate-y-1">
<img src="https://picsum.photos/400/300?random=2" alt="Product Image" class="w-full h-48 object-cover rounded-t-lg">
<div class="p-6">
<h2 class="text-xl font-semibold text-green-600 dark:text-green-400 mb-2">Classic Vinyl Player</h2>
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Experience the warm, rich sound of vinyl records like never before.</p>
<div class="flex justify-between items-center">
<span class="text-2xl font-bold text-red-500 dark:text-red-400">$89.50</span>
<button class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded-full transition-colors duration-300">Add to Cart</button>
</div>
</div>
</div>
<!-- Wishlist Item 3 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 transform hover:-translate-y-1">
<img src="https://picsum.photos/400/300?random=3" alt="Product Image" class="w-full h-48 object-cover rounded-t-lg">
<div class="p-6">
<h2 class="text-xl font-semibold text-green-600 dark:text-green-400 mb-2">Vintage Desk Lamp</h2>
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Illuminate your workspace with a touch of timeless elegance.</p>
<div class="flex justify-between items-center">
<span class="text-2xl font-bold text-red-500 dark:text-red-400">$39.99</span>
<button class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded-full transition-colors duration-300">Add to Cart</button>
</div>
</div>
</div>
</div>
</div>
</div>Composants associés
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
Un composant de liste de souhaits réactif pour les applications de sport/fitness, avec des micro-interactions, une palette de couleurs à contraste élevé et la prise en charge du mode sombre. Les utilisateurs peuvent ajouter/supprimer des éléments et voir un retour visuel.
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.