Wishlist Component
A complex, responsive wishlist component for SaaS applications with neon/glow effects and an analogous color scheme, supporting dark mode.
HTML Code
<div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans text-gray-800 dark:text-gray-200">
<div class="max-w-7xl mx-auto">
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold mb-8 text-center bg-clip-text text-transparent bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-400 dark:to-pink-400 drop-shadow-lg leading-tight">
Your Lumina Wishlist
</h1>
<div class="flex flex-col lg:flex-row gap-6 mb-8">
<!-- Filter/Sort Sidebar -->
<div class="lg:w-1/4 p-6 rounded-2xl bg-white dark:bg-gray-800 shadow-xl
border border-purple-300 dark:border-purple-700
shadow-purple-200/50 dark:shadow-purple-900/50
relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-purple-500 via-pink-500 to-red-500 opacity-10 blur-xl dark:opacity-5"></div>
<div class="relative z-10">
<h3 class="text-2xl font-bold mb-6 text-purple-600 dark:text-purple-400">Filters & Sort</h3>
<div class="mb-6">
<label for="category" class="block text-sm font-medium mb-2 text-gray-700 dark:text-gray-300">Category</label>
<select id="category" class="w-full p-3 rounded-lg border-2 border-purple-300 dark:border-purple-700
bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-200
focus:ring-2 focus:ring-pink-500 focus:outline-none transition-all duration-300 ease-in-out
shadow-md dark:shadow-lg">
<option>All Items</option>
<option>Software</option>
<option>Hardware</option>
<option>Accessories</option>
<option>Services</option>
</select>
</div>
<div class="mb-6">
<label for="status" class="block text-sm font-medium mb-2 text-gray-700 dark:text-gray-300">Status</label>
<select id="status" class="w-full p-3 rounded-lg border-2 border-purple-300 dark:border-purple-700
bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-200
focus:ring-2 focus:ring-pink-500 focus:outline-none transition-all duration-300 ease-in-out
shadow-md dark:shadow-lg">
<option>All</option>
<option>Available</option>
<option>Out of Stock</option>
<option>Coming Soon</option>
</select>
</div>
<div class="mb-6">
<label for="sort" class="block text-sm font-medium mb-2 text-gray-700 dark:text-gray-300">Sort By</label>
<select id="sort" class="w-full p-3 rounded-lg border-2 border-purple-300 dark:border-purple-700
bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-200
focus:ring-2 focus:ring-pink-500 focus:outline-none transition-all duration-300 ease-in-out
shadow-md dark:shadow-lg">
<option>Recently Added</option>
<option>Price: Low to High</option>
<option>Price: High to Low</option>
<option>Alphabetical</option>
</select>
</div>
<button class="w-full py-3 px-6 rounded-lg text-white font-semibold text-lg
bg-gradient-to-r from-pink-500 to-red-500
hover:from-pink-600 hover:to-red-600
focus:outline-none focus:ring-4 focus:ring-pink-500/50 dark:focus:ring-pink-400/50
transition-all duration-300 ease-in-out transform hover:scale-105
shadow-lg shadow-pink-500/30 dark:shadow-pink-700/50 neon-glow-button">
Apply Filters
</button>
</div>
</div>
<!-- Wishlist Items Grid -->
<div class="lg:w-3/4 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-6 auto-rows-min">
<!-- Wishlist Item 1 -->
<div class="relative flex flex-col p-6 rounded-2xl bg-white dark:bg-gray-800 shadow-xl
border border-pink-300 dark:border-pink-700
shadow-pink-200/50 dark:shadow-pink-900/50
hover:border-2 hover:border-pink-500 transition-all duration-300 ease-in-out
group overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-pink-500 via-purple-500 to-blue-500 opacity-10 blur-xl dark:opacity-5"></div>
<div class="relative z-10 flex flex-col h-full">
<img src="https://picsum.photos/seed/wishlist1/400/250" alt="Product Image" class="w-full h-40 object-cover rounded-xl mb-4 shadow-md group-hover:scale-105 transition-transform duration-300 ease-in-out">
<h3 class="text-xl font-bold mb-2 text-pink-600 dark:text-pink-400">Quantum AI Assistant Pro</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4 line-clamp-3 flex-grow">Revolutionary AI for code generation and analysis, boosting productivity significantly.</p>
<div class="flex items-center justify-between mb-4 mt-auto">
<span class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-400 dark:to-pink-400 drop-shadow">
$299.99
</span>
<span class="text-sm font-semibold text-green-500 dark:text-green-400 py-1 px-3 rounded-full bg-green-100 dark:bg-green-800">In Stock</span>
</div>
<div class="flex space-x-2">
<button class="flex-1 py-3 rounded-lg text-white font-semibold
bg-gradient-to-r from-blue-500 to-purple-500
hover:from-blue-600 hover:to-purple-600
focus:outline-none focus:ring-4 focus:ring-blue-500/50 dark:focus:ring-blue-400/50
transition-all duration-300 ease-in-out transform hover:scale-105
shadow-lg shadow-blue-500/30 dark:shadow-blue-700/50 neon-glow-button">
Add to Cart
</button>
<button class="p-3 rounded-lg bg-gray-200 dark:bg-gray-700
text-gray-600 dark:text-gray-300
hover:bg-red-500 hover:text-white
focus:outline-none focus:ring-4 focus:ring-red-500/50 dark:focus:ring-red-400/50
transition-all duration-300 ease-in-out transform hover:scale-105
shadow-lg shadow-gray-300/30 dark:shadow-gray-700/50">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd"></path></svg>
</button>
</div>
</div>
</div>
<!-- Wishlist Item 2 -->
<div class="relative flex flex-col p-6 rounded-2xl bg-white dark:bg-gray-800 shadow-xl
border border-pink-300 dark:border-pink-700
shadow-pink-200/50 dark:shadow-pink-900/50
hover:border-2 hover:border-pink-500 transition-all duration-300 ease-in-out
group overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-red-500 via-orange-500 to-yellow-500 opacity-10 blur-xl dark:opacity-5"></div>
<div class="relative z-10 flex flex-col h-full">
<img src="https://picsum.photos/seed/wishlist2/400/250" alt="Product Image" class="w-full h-40 object-cover rounded-xl mb-4 shadow-md group-hover:scale-105 transition-transform duration-300 ease-in-out">
<h3 class="text-xl font-bold mb-2 text-pink-600 dark:text-pink-400">Nebula Cloud Storage Pro</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4 line-clamp-3 flex-grow">Unlimited secure cloud storage with blazing-fast sync and advanced encryption.</p>
<div class="flex items-center justify-between mb-4 mt-auto">
<span class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-400 dark:to-pink-400 drop-shadow">
$49.99/mo
</span>
<span class="text-sm font-semibold text-green-500 dark:text-green-400 py-1 px-3 rounded-full bg-green-100 dark:bg-green-800">In Stock</span>
</div>
<div class="flex space-x-2">
<button class="flex-1 py-3 rounded-lg text-white font-semibold
bg-gradient-to-r from-blue-500 to-purple-500
hover:from-blue-600 hover:to-purple-600
focus:outline-none focus:ring-4 focus:ring-blue-500/50 dark:focus:ring-blue-400/50
transition-all duration-300 ease-in-out transform hover:scale-105
shadow-lg shadow-blue-500/30 dark:shadow-blue-700/50 neon-glow-button">
Add to Cart
</button>
<button class="p-3 rounded-lg bg-gray-200 dark:bg-gray-700
text-gray-600 dark:text-gray-300
hover:bg-red-500 hover:text-white
focus:outline-none focus:ring-4 focus:ring-red-500/50 dark:focus:ring-red-400/50
transition-all duration-300 ease-in-out transform hover:scale-105
shadow-lg shadow-gray-300/30 dark:shadow-gray-700/50">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd"></path></svg>
</button>
</div>
</div>
</div>
<!-- Wishlist Item 3 -->
<div class="relative flex flex-col p-6 rounded-2xl bg-white dark:bg-gray-800 shadow-xl
border border-pink-300 dark:border-pink-700
shadow-pink-200/50 dark:shadow-pink-900/50
hover:border-2 hover:border-pink-500 transition-all duration-300 ease-in-out
group overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-yellow-500 via-orange-500 to-red-500 opacity-10 blur-xl dark:opacity-5"></div>
<div class="relative z-10 flex flex-col h-full">
<img src="https://picsum.photos/seed/wishlist3/400/250" alt="Product Image" class="w-full h-40 object-cover rounded-xl mb-4 shadow-md group-hover:scale-105 transition-transform duration-300 ease-in-out">
<h3 class="text-xl font-bold mb-2 text-pink-600 dark:text-pink-400">Spectra UI Kit v3.0</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4 line-clamp-3 flex-grow">Figma and Sketch files for a futuristic UI design kit with glowing elements.</p>
<div class="flex items-center justify-between mb-4 mt-auto">
<span class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-400 dark:to-pink-400 drop-shadow">
$149.00
</span>
<span class="text-sm font-semibold text-yellow-500 dark:text-yellow-400 py-1 px-3 rounded-full bg-yellow-100 dark:bg-yellow-800">Coming Soon</span>
</div>
<div class="flex space-x-2">
<button class="flex-1 py-3 rounded-lg text-white font-semibold opacity-60 cursor-not-allowed
bg-gradient-to-r from-blue-500 to-purple-500
shadow-lg shadow-blue-500/30 dark:shadow-blue-700/50">
Notify Me
</button>
<button class="p-3 rounded-lg bg-gray-200 dark:bg-gray-700
text-gray-600 dark:text-gray-300
hover:bg-red-500 hover:text-white
focus:outline-none focus:ring-4 focus:ring-red-500/50 dark:focus:ring-red-400/50
transition-all duration-300 ease-in-out transform hover:scale-105
shadow-lg shadow-gray-300/30 dark:shadow-gray-700/50">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd"></path></svg>
</button>
</div>
</div>
</div>
<!-- Wishlist Item 4 -->
<div class="relative flex flex-col p-6 rounded-2xl bg-white dark:bg-gray-800 shadow-xl
border border-pink-300 dark:border-pink-700
shadow-pink-200/50 dark:shadow-pink-900/50
hover:border-2 hover:border-pink-500 transition-all duration-300 ease-in-out
group overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-green-500 via-blue-500 to-purple-500 opacity-10 blur-xl dark:opacity-5"></div>
<div class="relative z-10 flex flex-col h-full">
<img src="https://picsum.photos/seed/wishlist4/400/250" alt="Product Image" class="w-full h-40 object-cover rounded-xl mb-4 shadow-md group-hover:scale-105 transition-transform duration-300 ease-in-out">
<h3 class="text-xl font-bold mb-2 text-pink-600 dark:text-pink-400">DynaFlow CRM Integration</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4 line-clamp-3 flex-grow">Seamless integration for your existing CRM with advanced data analytics.</p>
<div class="flex items-center justify-between mb-4 mt-auto">
<span class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-400 dark:to-pink-400 drop-shadow">
$79.00/mo
</span>
<span class="text-sm font-semibold text-green-500 dark:text-green-400 py-1 px-3 rounded-full bg-green-100 dark:bg-green-800">In Stock</span>
</div>
<div class="flex space-x-2">
<button class="flex-1 py-3 rounded-lg text-white font-semibold
bg-gradient-to-r from-blue-500 to-purple-500
hover:from-blue-600 hover:to-purple-600
focus:outline-none focus:ring-4 focus:ring-blue-500/50 dark:focus:ring-blue-400/50
transition-all duration-300 ease-in-out transform hover:scale-105
shadow-lg shadow-blue-500/30 dark:shadow-blue-700/50 neon-glow-button">
Add to Cart
</button>
<button class="p-3 rounded-lg bg-gray-200 dark:bg-gray-700
text-gray-600 dark:text-gray-300
hover:bg-red-500 hover:text-white
focus:outline-none focus:ring-4 focus:ring-red-500/50 dark:focus:ring-red-400/50
transition-all duration-300 ease-in-out transform hover:scale-105
shadow-lg shadow-gray-300/30 dark:shadow-gray-700/50">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd"></path></svg>
</button>
</div>
</div>
</div>
<!-- Wishlist Item 5 -->
<div class="relative flex flex-col p-6 rounded-2xl bg-white dark:bg-gray-800 shadow-xl
border border-pink-300 dark:border-pink-700
shadow-pink-200/50 dark:shadow-pink-900/50
hover:border-2 hover:border-pink-500 transition-all duration-300 ease-in-out
group overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-purple-500 via-pink-500 to-red-500 opacity-10 blur-xl dark:opacity-5"></div>
<div class="relative z-10 flex flex-col h-full">
<img src="https://picsum.photos/seed/wishlist5/400/250" alt="Product Image" class="w-full h-40 object-cover rounded-xl mb-4 shadow-md group-hover:scale-105 transition-transform duration-300 ease-in-out">
<h3 class="text-xl font-bold mb-2 text-pink-600 dark:text-pink-400">Aura Security Suite</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4 line-clamp-3 flex-grow">Next-gen cybersecurity with threat detection and real-time protection.</p>
<div class="flex items-center justify-between mb-4 mt-auto">
<span class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-400 dark:to-pink-400 drop-shadow">
$199.00
</span>
<span class="text-sm font-semibold text-green-500 dark:text-green-400 py-1 px-3 rounded-full bg-green-100 dark:bg-green-800">In Stock</span>
</div>
<div class="flex space-x-2">
<button class="flex-1 py-3 rounded-lg text-white font-semibold
bg-gradient-to-r from-blue-500 to-purple-500
hover:from-blue-600 hover:to-purple-600
focus:outline-none focus:ring-4 focus:ring-blue-500/50 dark:focus:ring-blue-400/50
transition-all duration-300 ease-in-out transform hover:scale-105
shadow-lg shadow-blue-500/30 dark:shadow-blue-700/50 neon-glow-button">
Add to Cart
</button>
<button class="p-3 rounded-lg bg-gray-200 dark:bg-gray-700
text-gray-600 dark:text-gray-300
hover:bg-red-500 hover:text-white
focus:outline-none focus:ring-4 focus:ring-red-500/50 dark:focus:ring-red-400/50
transition-all duration-300 ease-in-out transform hover:scale-105
shadow-lg shadow-gray-300/30 dark:shadow-gray-700/50">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd"></path></svg>
</button>
</div>
</div>
</div>
<!-- Wishlist Item 6 -->
<div class="relative flex flex-col p-6 rounded-2xl bg-white dark:bg-gray-800 shadow-xl
border border-pink-300 dark:border-pink-700
shadow-pink-200/50 dark:shadow-pink-900/50
hover:border-2 hover:border-pink-500 transition-all duration-300 ease-in-out
group overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-green-500 via-blue-500 to-purple-500 opacity-10 blur-xl dark:opacity-5"></div>
<div class="relative z-10 flex flex-col h-full">
<img src="https://picsum.photos/seed/wishlist6/400/250" alt="Product Image" class="w-full h-40 object-cover rounded-xl mb-4 shadow-md group-hover:scale-105 transition-transform duration-300 ease-in-out">
<h3 class="text-xl font-bold mb-2 text-pink-600 dark:text-pink-400">ConnectFlow API</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4 line-clamp-3 flex-grow">Robust API for seamless integration with third-party web services.</p>
<div class="flex items-center justify-between mb-4 mt-auto">
<span class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-400 dark:to-pink-400 drop-shadow">
$99.00
</span>
<span class="text-sm font-semibold text-red-500 dark:text-red-400 py-1 px-3 rounded-full bg-red-100 dark:bg-red-800">Out of Stock</span>
</div>
<div class="flex space-x-2">
<button class="flex-1 py-3 rounded-lg text-white font-semibold opacity-60 cursor-not-allowed
bg-gradient-to-r from-blue-500 to-purple-500
shadow-lg shadow-blue-500/30 dark:shadow-blue-700/50">
Not Available
</button>
<button class="p-3 rounded-lg bg-gray-200 dark:bg-gray-700
text-gray-600 dark:text-gray-300
hover:bg-red-500 hover:text-white
focus:outline-none focus:ring-4 focus:ring-red-500/50 dark:focus:ring-red-400/50
transition-all duration-300 ease-in-out transform hover:scale-105
shadow-lg shadow-gray-300/30 dark:shadow-gray-700/50">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd"></path></svg>
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Pagination Section -->
<div class="mt-12 flex justify-center">
<nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
<a href="#" class="relative inline-flex items-center px-4 py-2 rounded-l-md border border-purple-300 dark:border-purple-700
bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300
hover:bg-purple-100 dark:hover:bg-purple-900
focus:z-10 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-pink-500 transition-colors duration-200">
<span class="sr-only">Previous</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" aria-current="page" class="relative inline-flex items-center px-4 py-2 border border-purple-300 dark:border-purple-700
bg-purple-500 text-white text-sm font-medium
focus:z-10 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-pink-500 transition-colors duration-200
hover:bg-purple-600 dark:bg-purple-700 dark:hover:bg-purple-800 shadow-md shadow-pink-500/30">
1
</a>
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-purple-300 dark:border-purple-700
bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300
hover:bg-purple-100 dark:hover:bg-purple-900
focus:z-10 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-pink-500 transition-colors duration-200">
2
</a>
<a href="#" class="hidden md:inline-flex relative items-center px-4 py-2 border border-purple-300 dark:border-purple-700
bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300
hover:bg-purple-100 dark:hover:bg-purple-900
focus:z-10 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-pink-500 transition-colors duration-200">
3
</a>
<span class="relative inline-flex items-center px-4 py-2 border border-purple-300 dark:border-purple-700
bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300">
...
</span>
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-purple-300 dark:border-purple-700
bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300
hover:bg-purple-100 dark:hover:bg-purple-900
focus:z-10 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-pink-500 transition-colors duration-200">
10
</a>
<a href="#" class="relative inline-flex items-center px-4 py-2 rounded-r-md border border-purple-300 dark:border-purple-700
bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300
hover:bg-purple-100 dark:hover:bg-purple-900
focus:z-10 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-pink-500 transition-colors duration-200">
<span class="sr-only">Next</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
</svg>
</a>
</nav>
</div>
</div>
</div>
<style>
/* Adding a subtle glow effect with a custom utility class */
.neon-glow-button {
box-shadow: 0 0 5px rgba(236, 72, 153, 0.7), 0 0 10px rgba(236, 72, 153, 0.5), 0 0 15px rgba(236, 72, 153, 0.3);
}
.dark .neon-glow-button {
box-shadow: 0 0 5px rgba(236, 72, 153, 0.5), 0 0 10px rgba(236, 72, 153, 0.3), 0 0 15px rgba(236, 72, 153, 0.2);
}
/* Custom drop-shadow for text to enhance glow effect within a gradient */
.drop-shadow-lg {
filter: drop-shadow(0 4px 3px rgba(168, 85, 247, 0.3)) drop-shadow(0 2px 2px rgba(236, 72, 153, 0.2));
}
.dark .drop-shadow-lg {
filter: drop-shadow(0 4px 3px rgba(168, 85, 247, 0.5)) drop-shadow(0 2px 2px rgba(236, 72, 153, 0.4));
}
/* Ensure images have smooth transitions too */
img {
transition: transform 0.3s ease-in-out;
}
</style>Related Components
Wishlist Real Estate Component
A responsive and high-contrast wishlist component for real estate properties, inspired by Material Design principles, with dark mode support.
Wishlist Component
A simple, responsive wishlist component for business/corporate websites with microinteractions. Features an analogous color scheme (blue-green-teal), dark theme support, and subtle hover animations. The component displays wishlist items with product images, names, prices, and action buttons.
Wishlist Component
A brutalist-style Wishlist Component for business websites, featuring a grayscale color scheme and moderate complexity. Responsive design with dark mode support using Tailwind CSS classes.