Wishlist_Component
A responsive and artistic wishlist component for sports/fitness applications, featuring a forest green color palette, with soft, painted textures, and dark mode support.
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>Related Components
Wishlist Component
A Neumorphism-styled Wishlist Component for social media, with a complementary color scheme. It includes a responsive design using Tailwind CSS with dark mode support. Only HTML and Tailwind classes are used, with no JavaScript. Images are sourced from picsum.photos and avatars from randomuser.me.
Wishlist Component
Retro/Vintage Wishlist Component for E-commerce with Triadic color scheme, simple complexity, responsive design, and dark theme support.
Wishlist Component
A responsive wishlist component with 3D elements and pastel colors, supporting dark theme. It includes multiple interactive elements suitable for e-commerce. No JavaScript, only HTML and Tailwind CSS.