Wishlist_Component
Un composant de liste de souhaits réactif et artistique pour les applications de sport/fitness, doté d’une palette de couleurs vert forêt, avec des textures douces et peintes et une prise en charge du mode sombre.
HTML Code
<div class="font-sans antialiased text-gray-900 bg-emerald-50 dark:bg-gray-900 min-h-screen py-8 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.005]">
<div class="p-6 sm:p-8 lg:p-10 border-b border-emerald-100 dark:border-gray-700">
<h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-emerald-900 dark:text-emerald-100 mb-4 tracking-tight drop-shadow-md">Your Fitness Wishlist</h2>
<p class="text-lg text-emerald-700 dark:text-emerald-300 max-w-2xl leading-relaxed">
Curate your dream gear and activities. Add items you're eyeing or experiences you aspire to conquer.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6 sm:p-8 lg:p-10">
<!-- Wishlist Item 1 -->
<div class="group relative bg-white dark:bg-gray-700 rounded-2xl shadow-lg overflow-hidden border-2 border-transparent hover:border-emerald-500 dark:hover:border-emerald-300 transition-all duration-300 ease-in-out transform hover:scale-[1.02]">
<img src="https://picsum.photos/400/250?random=1" alt="Trail Running Shoes" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300">
<div class="p-5">
<h3 class="text-2xl font-bold text-emerald-900 dark:text-emerald-100 mb-2">Trail Running Shoes</h3>
<p class="text-emerald-700 dark:text-emerald-300 text-sm mb-4 leading-snug">Lightweight, durable, and grippy for conquering any terrain. Essential for trail adventures.</p>
<div class="flex items-center justify-between">
<span class="text-xl font-semibold text-emerald-800 dark:text-emerald-200">$149.99</span>
<button class="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white font-semibold rounded-lg shadow-md transition-all duration-200 dark:bg-emerald-500 dark:hover:bg-emerald-600">
Add to Cart
</button>
</div>
</div>
<div class="absolute top-3 right-3 text-emerald-500 group-hover:text-red-500 dark:text-emerald-300 dark:group-hover:text-red-400 cursor-pointer transition-colors duration-200">
<svg class="w-7 h-7" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
</div>
</div>
<!-- Wishlist Item 2 -->
<div class="group relative bg-white dark:bg-gray-700 rounded-2xl shadow-lg overflow-hidden border-2 border-transparent hover:border-emerald-500 dark:hover:border-emerald-300 transition-all duration-300 ease-in-out transform hover:scale-[1.02]">
<img src="https://picsum.photos/400/250?random=2" alt="Smart Sports Watch" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300">
<div class="p-5">
<h3 class="text-2xl font-bold text-emerald-900 dark:text-emerald-100 mb-2">Smart Sports Watch</h3>
<p class="text-emerald-700 dark:text-emerald-300 text-sm mb-4 leading-snug">Track your performance, heart rate, and GPS with this advanced fitness companion.</p>
<div class="flex items-center justify-between">
<span class="text-xl font-semibold text-emerald-800 dark:text-emerald-200">$299.00</span>
<button class="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white font-semibold rounded-lg shadow-md transition-all duration-200 dark:bg-emerald-500 dark:hover:bg-emerald-600">
Add to Cart
</button>
</div>
</div>
<div class="absolute top-3 right-3 text-red-500 dark:text-red-400 cursor-pointer transition-colors duration-200">
<svg class="w-7 h-7" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
</div>
</div>
<!-- Wishlist Item 3 -->
<div class="group relative bg-white dark:bg-gray-700 rounded-2xl shadow-lg overflow-hidden border-2 border-transparent hover:border-emerald-500 dark:hover:border-emerald-300 transition-all duration-300 ease-in-out transform hover:scale-[1.02]">
<img src="https://picsum.photos/400/250?random=3" alt="Yoga Mat" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300">
<div class="p-5">
<h3 class="text-2xl font-bold text-emerald-900 dark:text-emerald-100 mb-2">Premium Yoga Mat</h3>
<p class="text-emerald-700 dark:text-emerald-300 text-sm mb-4 leading-snug">Thick, non-slip, and eco-friendly. Perfect for deep stretches and challenging poses.</p>
<div class="flex items-center justify-between">
<span class="text-xl font-semibold text-emerald-800 dark:text-emerald-200">$59.50</span>
<button class="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white font-semibold rounded-lg shadow-md transition-all duration-200 dark:bg-emerald-500 dark:hover:bg-emerald-600">
Add to Cart
</button>
</div>
</div>
<div class="absolute top-3 right-3 text-emerald-500 group-hover:text-red-500 dark:text-emerald-300 dark:group-hover:text-red-400 cursor-pointer transition-colors duration-200">
<svg class="w-7 h-7" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
</div>
</div>
<!-- Wishlist Item 4 -->
<div class="group relative bg-white dark:bg-gray-700 rounded-2xl shadow-lg overflow-hidden border-2 border-transparent hover:border-emerald-500 dark:hover:border-emerald-300 transition-all duration-300 ease-in-out transform hover:scale-[1.02]">
<img src="https://picsum.photos/400/250?random=4" alt="Resistance Bands Set" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300">
<div class="p-5">
<h3 class="text-2xl font-bold text-emerald-900 dark:text-emerald-100 mb-2">Resistance Bands Set</h3>
<p class="text-emerald-700 dark:text-emerald-300 text-sm mb-4 leading-snug">Versatile for strength training, stretching, and physical therapy. All levels.</p>
<div class="flex items-center justify-between">
<span class="text-xl font-semibold text-emerald-800 dark:text-emerald-200">$34.99</span>
<button class="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white font-semibold rounded-lg shadow-md transition-all duration-200 dark:bg-emerald-500 dark:hover:bg-emerald-600">
Add to Cart
</button>
</div>
</div>
<div class="absolute top-3 right-3 text-red-500 dark:text-red-400 cursor-pointer transition-colors duration-200">
<svg class="w-7 h-7" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
</div>
</div>
<!-- Wishlist Item 5 -->
<div class="group relative bg-white dark:bg-gray-700 rounded-2xl shadow-lg overflow-hidden border-2 border-transparent hover:border-emerald-500 dark:hover:border-emerald-300 transition-all duration-300 ease-in-out transform hover:scale-[1.02]">
<img src="https://picsum.photos/400/250?random=5" alt="Aero Cycling Helmet" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300">
<div class="p-5">
<h3 class="text-2xl font-bold text-emerald-900 dark:text-emerald-100 mb-2">Aero Cycling Helmet</h3>
<p class="text-emerald-700 dark:text-emerald-300 text-sm mb-4 leading-snug">Lightweight, aerodynamic design for speed and safety on your rides.</p>
<div class="flex items-center justify-between">
<span class="text-xl font-semibold text-emerald-800 dark:text-emerald-200">$99.00</span>
<button class="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white font-semibold rounded-lg shadow-md transition-all duration-200 dark:bg-emerald-500 dark:hover:bg-emerald-600">
Add to Cart
</button>
</div>
</div>
<div class="absolute top-3 right-3 text-emerald-500 group-hover:text-red-500 dark:text-emerald-300 dark:group-hover:text-red-400 cursor-pointer transition-colors duration-200">
<svg class="w-7 h-7" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
</div>
</div>
<!-- Wishlist Item 6 -->
<div class="group relative bg-white dark:bg-gray-700 rounded-2xl shadow-lg overflow-hidden border-2 border-transparent hover:border-emerald-500 dark:hover:border-emerald-300 transition-all duration-300 ease-in-out transform hover:scale-[1.02]">
<img src="https://picsum.photos/400/250?random=6" alt="Hydration Backpack" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300">
<div class="p-5">
<h3 class="text-2xl font-bold text-emerald-900 dark:text-emerald-100 mb-2">Hydration Backpack</h3>
<p class="text-emerald-700 dark:text-emerald-300 text-sm mb-4 leading-snug">Stay hydrated on long runs or hikes with this lightweight, comfortable pack.</p>
<div class="flex items-center justify-between">
<span class="text-xl font-semibold text-emerald-800 dark:text-emerald-200">$75.00</span>
<button class="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white font-semibold rounded-lg shadow-md transition-all duration-200 dark:bg-emerald-500 dark:hover:bg-emerald-600">
Add to Cart
</button>
</div>
</div>
<div class="absolute top-3 right-3 text-red-500 dark:text-red-400 cursor-pointer transition-colors duration-200">
<svg class="w-7 h-7" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
</div>
</div>
</div>
<div class="p-6 sm:p-8 lg:p-10 border-t border-emerald-100 dark:border-gray-700 flex flex-col sm:flex-row justify-between items-center">
<p class="text-emerald-700 dark:text-emerald-300 text-center sm:text-left mb-4 sm:mb-0">
Ready to make your fitness dreams a reality? Start adding items!
</p>
<button class="px-8 py-3 bg-emerald-700 hover:bg-emerald-800 text-white font-bold rounded-full shadow-lg transform transition-all duration-300 hover:scale-105 dark:bg-emerald-600 dark:hover:bg-emerald-700">
Discover More Gear
</button>
</div>
</div>
</div>Composants associés
Composant de la liste de souhaits
Un composant de liste de souhaits réactif conçu avec des éléments 3D, des tons de terre et la prise en charge du mode sombre pour présenter des travaux ou des produits.
Glassmorphism_Wishlist_Component
Un composant de liste de souhaits complexe et réactif avec un design Glassmorphism avec des tons océan/bleu, optimisé pour les plateformes de rencontres/sociales. Comprend la prise en charge du mode sombre et des éléments interactifs.
Composant de la liste de souhaits
Un composant de liste de souhaits complexe et réactif avec un design rétro/vintage, une palette de couleurs de terre et une prise en charge du mode sombre, adapté à un blog ou à un site de contenu.