Wishlist Component
A responsive wishlist component for sports/fitness applications, featuring microinteractions, high-contrast color scheme, and dark mode support. Users can add/remove items and see visual feedback.
HTML Code
<div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans">
<div class="max-w-7xl mx-auto">
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 dark:text-white mb-8 sm:mb-12 text-center">
Your Fitness Wishlist
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
<!-- Wishlist Item 1 -->
<div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 overflow-hidden group">
<img src="https://picsum.photos/400/300?random=1" alt="Sports Item 1" class="w-full h-48 sm:h-56 object-cover rounded-t-xl group-hover:scale-105 transition-transform duration-500 ease-in-out">
<div class="p-4 sm:p-5 flex flex-col justify-between h-full">
<div>
<h3 class="text-xl md:text-2xl font-bold text-gray-900 dark:text-white mb-2">Pro Training Shoes</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm md:text-base mb-4 line-clamp-2">High-performance running shoes designed for speed and comfort.</p>
</div>
<div class="flex items-center justify-between mt-auto">
<span class="text-2xl md:text-3xl font-extrabold text-blue-600 dark:text-cyan-400">$120.00</span>
<button class="relative group/btn bg-gradient-to-r from-blue-500 to-indigo-600 dark:from-cyan-600 dark:to-blue-700 text-white rounded-full px-5 py-2.5 text-base font-semibold overflow-hidden shadow-md hover:shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95">
<span class="relative z-10">Remove</span>
<span class="absolute inset-0 bg-white opacity-0 group-hover/btn:opacity-20 transition-opacity duration-300"></span>
<div class="absolute inset-0 rounded-full bg-white dark:bg-gray-700 transform scale-0 group-active/btn:scale-105 opacity-0 transition-all duration-300 ease-out"></div>
</button>
</div>
</div>
<div class="absolute top-3 right-3 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full animate-bounce-custom" style="animation-iteration-count: infinite;">10% OFF</div>
</div>
<!-- Wishlist Item 2 -->
<div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 overflow-hidden group">
<img src="https://picsum.photos/400/300?random=2" alt="Sports Item 2" class="w-full h-48 sm:h-56 object-cover rounded-t-xl group-hover:scale-105 transition-transform duration-500 ease-in-out">
<div class="p-4 sm:p-5 flex flex-col justify-between h-full">
<div>
<h3 class="text-xl md:text-2xl font-bold text-gray-900 dark:text-white mb-2">Smart Fitness Tracker</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm md:text-base mb-4 line-clamp-2">Monitor your heart rate, steps, and sleep with advanced precision.</p>
</div>
<div class="flex items-center justify-between mt-auto">
<span class="text-2xl md:text-3xl font-extrabold text-blue-600 dark:text-cyan-400">$85.00</span>
<button class="relative group/btn bg-gradient-to-r from-blue-500 to-indigo-600 dark:from-cyan-600 dark:to-blue-700 text-white rounded-full px-5 py-2.5 text-base font-semibold overflow-hidden shadow-md hover:shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95">
<span class="relative z-10">Remove</span>
<span class="absolute inset-0 bg-white opacity-0 group-hover/btn:opacity-20 transition-opacity duration-300"></span>
<div class="absolute inset-0 rounded-full bg-white dark:bg-gray-700 transform scale-0 group-active/btn:scale-105 opacity-0 transition-all duration-300 ease-out"></div>
</button>
</div>
</div>
</div>
<!-- Wishlist Item 3 -->
<div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 overflow-hidden group">
<img src="https://picsum.photos/400/300?random=3" alt="Sports Item 3" class="w-full h-48 sm:h-56 object-cover rounded-t-xl group-hover:scale-105 transition-transform duration-500 ease-in-out">
<div class="p-4 sm:p-5 flex flex-col justify-between h-full">
<div>
<h3 class="text-xl md:text-2xl font-bold text-gray-900 dark:text-white mb-2">Ergonomic Yoga Mat</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm md:text-base mb-4 line-clamp-2">Non-slip surface and extra cushioning for optimal yoga and pilates sessions.</p>
</div>
<div class="flex items-center justify-between mt-auto">
<span class="text-2xl md:text-3xl font-extrabold text-blue-600 dark:text-cyan-400">$45.00</span>
<button class="relative group/btn bg-gradient-to-r from-blue-500 to-indigo-600 dark:from-cyan-600 dark:to-blue-700 text-white rounded-full px-5 py-2.5 text-base font-semibold overflow-hidden shadow-md hover:shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95">
<span class="relative z-10">Remove</span>
<span class="absolute inset-0 bg-white opacity-0 group-hover/btn:opacity-20 transition-opacity duration-300"></span>
<div class="absolute inset-0 rounded-full bg-white dark:bg-gray-700 transform scale-0 group-active/btn:scale-105 opacity-0 transition-all duration-300 ease-out"></div>
</button>
</div>
</div>
<div class="absolute top-3 left-3 bg-green-500 text-white text-xs font-bold px-2 py-1 rounded-full">NEW</div>
</div>
<!-- Wishlist Item 4 -->
<div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 overflow-hidden group">
<img src="https://picsum.photos/400/300?random=4" alt="Sports Item 4" class="w-full h-48 sm:h-56 object-cover rounded-t-xl group-hover:scale-105 transition-transform duration-500 ease-in-out">
<div class="p-4 sm:p-5 flex flex-col justify-between h-full">
<div>
<h3 class="text-xl md:text-2xl font-bold text-gray-900 dark:text-white mb-2">Durable Dumbbell Set</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm md:text-base mb-4 line-clamp-2">Adjustable weights for versatile strength training workouts at home.</p>
</div>
<div class="flex items-center justify-between mt-auto">
<span class="text-2xl md:text-3xl font-extrabold text-blue-600 dark:text-cyan-400">$150.00</span>
<button class="relative group/btn bg-gradient-to-r from-blue-500 to-indigo-600 dark:from-cyan-600 dark:to-blue-700 text-white rounded-full px-5 py-2.5 text-base font-semibold overflow-hidden shadow-md hover:shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95">
<span class="relative z-10">Remove</span>
<span class="absolute inset-0 bg-white opacity-0 group-hover/btn:opacity-20 transition-opacity duration-300"></span>
<div class="absolute inset-0 rounded-full bg-white dark:bg-gray-700 transform scale-0 group-active/btn:scale-105 opacity-0 transition-all duration-300 ease-out"></div>
</button>
</div>
</div>
</div>
<!-- Wishlist Item 5 -->
<div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 overflow-hidden group">
<img src="https://picsum.photos/400/300?random=5" alt="Sports Item 5" class="w-full h-48 sm:h-56 object-cover rounded-t-xl group-hover:scale-105 transition-transform duration-500 ease-in-out">
<div class="p-4 sm:p-5 flex flex-col justify-between h-full">
<div>
<h3 class="text-xl md:text-2xl font-bold text-gray-900 dark:text-white mb-2">Hydration Backpack</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm md:text-base mb-4 line-clamp-2">Lightweight and spacious backpack for long runs or hikes.</p>
</div>
<div class="flex items-center justify-between mt-auto">
<span class="text-2xl md:text-3xl font-extrabold text-blue-600 dark:text-cyan-400">$60.00</span>
<button class="relative group/btn bg-gradient-to-r from-blue-500 to-indigo-600 dark:from-cyan-600 dark:to-blue-700 text-white rounded-full px-5 py-2.5 text-base font-semibold overflow-hidden shadow-md hover:shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95">
<span class="relative z-10">Remove</span>
<span class="absolute inset-0 bg-white opacity-0 group-hover/btn:opacity-20 transition-opacity duration-300"></span>
<div class="absolute inset-0 rounded-full bg-white dark:bg-gray-700 transform scale-0 group-active/btn:scale-105 opacity-0 transition-all duration-300 ease-out"></div>
</button>
</div>
</div>
</div>
<!-- Wishlist Item 6 -->
<div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 overflow-hidden group">
<img src="https://picsum.photos/400/300?random=6" alt="Sports Item 6" class="w-full h-48 sm:h-56 object-cover rounded-t-xl group-hover:scale-105 transition-transform duration-500 ease-in-out">
<div class="p-4 sm:p-5 flex flex-col justify-between h-full">
<div>
<h3 class="text-xl md:text-2xl font-bold text-gray-900 dark:text-white mb-2">Resistance Band Set</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm md:text-base mb-4 line-clamp-2">Versatile bands for strength, flexibility, and rehabilitation exercises.</p>
</div>
<div class="flex items-center justify-between mt-auto">
<span class="text-2xl md:text-3xl font-extrabold text-blue-600 dark:text-cyan-400">$30.00</span>
<button class="relative group/btn bg-gradient-to-r from-blue-500 to-indigo-600 dark:from-cyan-600 dark:to-blue-700 text-white rounded-full px-5 py-2.5 text-base font-semibold overflow-hidden shadow-md hover:shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95">
<span class="relative z-10">Remove</span>
<span class="absolute inset-0 bg-white opacity-0 group-hover/btn:opacity-20 transition-opacity duration-300"></span>
<div class="absolute inset-0 rounded-full bg-white dark:bg-gray-700 transform scale-0 group-active/btn:scale-105 opacity-0 transition-all duration-300 ease-out"></div>
</button>
</div>
</div>
</div>
</div>
<div class="mt-12 text-center">
<button class="inline-flex items-center px-8 py-4 bg-lime-600 hover:bg-lime-700 dark:bg-lime-500 dark:hover:bg-lime-600 text-white text-lg sm:text-xl font-bold rounded-full shadow-lg hover:shadow-xl transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95 group">
<svg class="w-6 h-6 mr-3 group-hover:rotate-6 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
</svg>
Proceed to Checkout
</button>
</div>
</div>
</div>
<style>
/* Custom keyframes for bounce-custom animation */
@keyframes bounce-custom {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
.animate-bounce-custom {
animation-name: bounce-custom;
animation-duration: 1s;
animation-timing-function: ease-in-out;
}
</style>Related Components
Glassmorphism Wishlist Component - Agriculture/Farming
A responsive wishlist component with a glassmorphism design style, pastel color scheme, and tailored for agriculture/farming websites. Features frosted glass-like translucent elements with blur effects, semantic HTML, and full dark mode support.
Wishlist Component
Wishlist Component with 3D Design, Analogous color scheme, and Simple complexity for Dashboard purpose, with responsive design and dark theme support.
Wishlist Component
A simple e-commerce wishlist component with microinteractions and a grayscale color scheme, optimized for responsive design and dark mode support.