HTML 代码
<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>