Componente de lista de deseos
Un componente de lista de deseos complejo y receptivo para aplicaciones SaaS con efectos de neón/brillo y un esquema de color análogo, compatible con el modo oscuro.
Código HTML
<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>Componentes relacionados
Componente de lista de deseos
Un componente simplista de la lista de deseos con un enfoque brutalista, utilizando un esquema de color en escala de grises, diseñado para exhibir trabajos o productos.
Componente de lista de deseos
Un componente simple de lista de deseos de comercio electrónico con microinteracciones y un esquema de color en escala de grises, optimizado para un diseño receptivo y compatibilidad con el modo oscuro.
Componente de lista de deseos
Un componente de lista de deseos con estilo de diseño 3D, combinación de colores pastel y diseño receptivo para sitios web comerciales, compatible con el modo oscuro.