Cyberpunk Wishlist Component
A complex, cyberpunk-themed wishlist component for cryptocurrency/blockchain applications, featuring dark backgrounds, neon jewel-tone accents, and responsive design with dark mode support.
HTML Code
<div class="min-h-screen bg-neutral-950 text-emerald-300 font-mono p-4 sm:p-8 dark:bg-black dark:text-teal-300">
<div class="container mx-auto max-w-7xl relative overflow-hidden rounded-lg border-2 border-emerald-600 shadow-2xl shadow-emerald-900/50 dark:border-teal-700 dark:shadow-teal-900/50 backdrop-blur-sm bg-neutral-900/70 p-4 md:p-8">
<div class="absolute inset-0 bg-gradient-to-br from-emerald-900/30 via-transparent to-sapphire-900/30 dark:from-teal-900/30 dark:to-blue-900/30 animate-pulse-slow z-0"></div>
<div class="relative z-10">
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold mb-8 text-center text-emerald-400 drop-shadow-[0_0_8px_rgba(52,211,153,0.7)] dark:text-teal-400 dark:drop-shadow-[0_0_8px_rgba(45,212,191,0.7)] tracking-wider uppercase">
<span class="block">CYBERNETIC</span> WATCHLIST
</h1>
<!-- Search and Filter Bar -->
<div class="mb-8 flex flex-col sm:flex-row items-center justify-between space-y-4 sm:space-y-0 sm:space-x-4">
<div class="relative flex-grow w-full sm:w-auto">
<input type="text" placeholder="Search Cyber-Assets..." class="w-full py-3 pl-12 pr-4 bg-neutral-800 border-2 border-emerald-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-500 text-emerald-200 placeholder-emerald-400 dark:bg-gray-900 dark:border-teal-600 dark:focus:ring-teal-500 dark:text-teal-200 dark:placeholder-teal-400 transition-all duration-300 ascend-animation">
<svg class="absolute left-4 top-1/2 -translate-y-1/2 h-6 w-6 text-emerald-500 dark:text-teal-500" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</div>
<select class="w-full sm:w-auto py-3 px-4 bg-neutral-800 border-2 border-emerald-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-500 text-emerald-200 dark:bg-gray-900 dark:border-teal-600 dark:focus:ring-teal-500 dark:text-teal-200 transition-all duration-300 ascend-animation">
<option value="all">All Assets</option>
<option value="crypto">Cryptocurrency</option>
<option value="nft">NFTs</option>
<option value="defi">DeFi Protocols</option>
</select>
<button class="w-full sm:w-auto px-6 py-3 bg-fuchsia-700 text-white font-bold rounded-lg hover:bg-fuchsia-600 focus:outline-none focus:ring-2 focus:ring-fuchsia-500 transition-all duration-300 ascend-animation shadow-lg shadow-fuchsia-900/50 dark:bg-purple-700 dark:hover:bg-purple-600 dark:focus:ring-purple-500 dark:shadow-purple-900/50">Add New Asset</button>
</div>
<!-- Watchlist Items Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 fade-in-animation">
<!-- Watchlist Item 1 -->
<div class="bg-neutral-800/80 rounded-lg p-6 border border-emerald-700 shadow-lg shadow-emerald-900/30 hover:shadow-emerald-700/50 transition-all duration-300 transform hover:-translate-y-1 hover:scale-[1.01] overflow-hidden relative dark:bg-gray-900/80 dark:border-teal-600 dark:shadow-teal-900/30 dark:hover:shadow-teal-700/50 ascend-animation">
<div class="absolute top-0 right-0 h-4 w-16 bg-gradient-to-r from-transparent via-emerald-500/50 to-emerald-500/80 dark:via-teal-500/50 dark:to-teal-500/80 transform origin-top-right skew-x-[-20deg] z-0"></div>
<div class="flex items-center mb-4 relative z-10">
<img src="https://picsum.photos/seed/bitcoin/60/60" alt="Bitcoin" class="w-16 h-16 rounded-full border-2 border-emerald-400 ring-2 ring-emerald-600 dark:border-teal-400 dark:ring-teal-600 shadow-md mr-4 aspect-square object-cover">
<div>
<h3 class="text-2xl font-bold text-emerald-300 dark:text-teal-300">BITCOIN</h3>
<p class="text-emerald-500 dark:text-teal-500">$BTC</p>
</div>
</div>
<div class="text-lg mb-4 leading-relaxed relative z-10">
<p class="flex justify-between items-center mb-1"><span class="text-emerald-400 dark:text-teal-400">Price:</span> <span class="text-white font-bold text-xl">$68,345.21</span></p>
<p class="flex justify-between items-center mb-1"><span class="text-emerald-400 dark:text-teal-400">24h Change:</span> <span class="text-green-500 font-bold"><span class="mr-1">▲</span>+2.3%</span></p>
<p class="flex justify-between items-center"><span class="text-emerald-400 dark:text-teal-400">Market Cap:</span> <span class="text-white">$1.3T</span></p>
</div>
<div class="flex justify-between items-center border-t border-emerald-700 pt-4 relative z-10 dark:border-teal-600">
<button class="text-fuchsia-400 hover:text-fuchsia-300 transition-colors duration-300 flex items-center group">
<svg class="w-6 h-6 mr-1 text-red-500 group-hover:text-red-400" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10.788 3.212c.44-.44 1.092-.44 1.532 0l4.314 4.314a1.125 1.125 0 010 1.592l-4.314 4.314a1.125 1.125 0 01-1.592 0l-4.314-4.314a1.125 1.125 0 010-1.592l4.314-4.314z" clip-rule="evenodd" />
<path fill-rule="evenodd" d="M7.646 6.146a.75.75 0 011.06 0L12 9.49l3.293-3.344a.75.75 0 111.06 1.06L13.06 10.551a1.125 1.125 0 01-1.592 0L7.586 7.207a.75.75 0 010-1.06z" clip-rule="evenodd" />
<path fill-rule="evenodd" d="M4.5 17.5a.75.75 0 01-.75-.75V14.5a.75.75 0 011.5 0v2.25a.75.75 0 01-.75.75zM12 17.5a.75.75 0 01-.75-.75V14.5a.75.75 0 011.5 0v2.25a.75.75 0 01-.75.75zM19.5 17.5a.75.75 0 01-.75-.75V14.5a.75.75 0 011.5 0v2.25a.75.75 0 01-.75.75z" clip-rule="evenodd" />
</svg>
<span class="block">REMOVE</span>
</button>
<a href="#" class="px-4 py-2 bg-sapphire-700 text-white rounded-md text-sm hover:bg-sapphire-600 focus:outline-none focus:ring-2 focus:ring-sapphire-500 transition-all duration-300 shadow-md shadow-sapphire-900/50 dark:bg-blue-700 dark:hover:bg-blue-600 dark:focus:ring-blue-500 dark:shadow-blue-900/50">View Analytics</a>
</div>
</div>
<!-- Watchlist Item 2 -->
<div class="bg-neutral-800/80 rounded-lg p-6 border border-emerald-700 shadow-lg shadow-emerald-900/30 hover:shadow-emerald-700/50 transition-all duration-300 transform hover:-translate-y-1 hover:scale-[1.01] overflow-hidden relative dark:bg-gray-900/80 dark:border-teal-600 dark:shadow-teal-900/30 dark:hover:shadow-teal-700/50 ascend-animation">
<div class="absolute top-0 right-0 h-4 w-16 bg-gradient-to-r from-transparent via-fuchsia-500/50 to-fuchsia-500/80 dark:via-purple-500/50 dark:to-purple-500/80 transform origin-top-right skew-x-[-20deg] z-0"></div>
<div class="flex items-center mb-4 relative z-10">
<img src="https://picsum.photos/seed/ethereum/60/60" alt="Ethereum" class="w-16 h-16 rounded-full border-2 border-fuchsia-400 ring-2 ring-fuchsia-600 dark:border-purple-400 dark:ring-purple-600 shadow-md mr-4 aspect-square object-cover">
<div>
<h3 class="text-2xl font-bold text-fuchsia-300 dark:text-purple-300">ETHEREUM</h3>
<p class="text-fuchsia-500 dark:text-purple-500">$ETH</p>
</div>
</div>
<div class="text-lg mb-4 leading-relaxed relative z-10">
<p class="flex justify-between items-center mb-1"><span class="text-emerald-400 dark:text-teal-400">Price:</span> <span class="text-white font-bold text-xl">$3,789.12</span></p>
<p class="flex justify-between items-center mb-1"><span class="text-emerald-400 dark:text-teal-400">24h Change:</span> <span class="text-yellow-500 font-bold"><span class="mr-1">•</span>0.1%</span></p>
<p class="flex justify-between items-center"><span class="text-emerald-400 dark:text-teal-400">Market Cap:</span> <span class="text-white">$455B</span></p>
</div>
<div class="flex justify-between items-center border-t border-emerald-700 pt-4 relative z-10 dark:border-teal-600">
<button class="text-fuchsia-400 hover:text-fuchsia-300 transition-colors duration-300 flex items-center group">
<svg class="w-6 h-6 mr-1 text-red-500 group-hover:text-red-400" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10.788 3.212c.44-.44 1.092-.44 1.532 0l4.314 4.314a1.125 1.125 0 010 1.592l-4.314 4.314a1.125 1.125 0 01-1.592 0l-4.314-4.314a1.125 1.125 0 010-1.592l4.314-4.314z" clip-rule="evenodd" />
<path fill-rule="evenodd" d="M7.646 6.146a.75.75 0 011.06 0L12 9.49l3.293-3.344a.75.75 0 111.06 1.06L13.06 10.551a1.125 1.125 0 01-1.592 0L7.586 7.207a.75.75 0 010-1.06z" clip-rule="evenodd" />
<path fill-rule="evenodd" d="M4.5 17.5a.75.75 0 01-.75-.75V14.5a.75.75 0 011.5 0v2.25a.75.75 0 01-.75.75zM12 17.5a.75.75 0 01-.75-.75V14.5a.75.75 0 011.5 0v2.25a.75.75 0 01-.75.75zM19.5 17.5a.75.75 0 01-.75-.75V14.5a.75.75 0 011.5 0v2.25a.75.75 0 01-.75.75z" clip-rule="evenodd" />
</svg>
<span class="block">REMOVE</span>
</button>
<a href="#" class="px-4 py-2 bg-sapphire-700 text-white rounded-md text-sm hover:bg-sapphire-600 focus:outline-none focus:ring-2 focus:ring-sapphire-500 transition-all duration-300 shadow-md shadow-sapphire-900/50 dark:bg-blue-700 dark:hover:bg-blue-600 dark:focus:ring-blue-500 dark:shadow-blue-900/50">View Analytics</a>
</div>
</div>
<!-- Watchlist Item 3 -->
<div class="bg-neutral-800/80 rounded-lg p-6 border border-emerald-700 shadow-lg shadow-emerald-900/30 hover:shadow-emerald-700/50 transition-all duration-300 transform hover:-translate-y-1 hover:scale-[1.01] overflow-hidden relative dark:bg-gray-900/80 dark:border-teal-600 dark:shadow-teal-900/30 dark:hover:shadow-teal-700/50 ascend-animation">
<div class="absolute top-0 right-0 h-4 w-16 bg-gradient-to-r from-transparent via-sapphire-500/50 to-sapphire-500/80 dark:via-blue-500/50 dark:to-blue-500/80 transform origin-top-right skew-x-[-20deg] z-0"></div>
<div class="flex items-center mb-4 relative z-10">
<img src="https://picsum.photos/seed/solana/60/60" alt="Solana" class="w-16 h-16 rounded-full border-2 border-sapphire-400 ring-2 ring-sapphire-600 dark:border-blue-400 dark:ring-blue-600 shadow-md mr-4 aspect-square object-cover">
<div>
<h3 class="text-2xl font-bold text-sapphire-300 dark:text-blue-300">SOLANA</h3>
<p class="text-sapphire-500 dark:text-blue-500">$SOL</p>
</div>
</div>
<div class="text-lg mb-4 leading-relaxed relative z-10">
<p class="flex justify-between items-center mb-1"><span class="text-emerald-400 dark:text-teal-400">Price:</span> <span class="text-white font-bold text-xl">$150.78</span></p>
<p class="flex justify-between items-center mb-1"><span class="text-emerald-400 dark:text-teal-400">24h Change:</span> <span class="text-red-500 font-bold"><span class="mr-1">▼</span>-1.8%</span></p>
<p class="flex justify-between items-center"><span class="text-emerald-400 dark:text-teal-400">Market Cap:</span> <span class="text-white">$68B</span></p>
</div>
<div class="flex justify-between items-center border-t border-emerald-700 pt-4 relative z-10 dark:border-teal-600">
<button class="text-fuchsia-400 hover:text-fuchsia-300 transition-colors duration-300 flex items-center group">
<svg class="w-6 h-6 mr-1 text-red-500 group-hover:text-red-400" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10.788 3.212c.44-.44 1.092-.44 1.532 0l4.314 4.314a1.125 1.125 0 010 1.592l-4.314 4.314a1.125 1.125 0 01-1.592 0l-4.314-4.314a1.125 1.125 0 010-1.592l4.314-4.314z" clip-rule="evenodd" />
<path fill-rule="evenodd" d="M7.646 6.146a.75.75 0 011.06 0L12 9.49l3.293-3.344a.75.75 0 111.06 1.06L13.06 10.551a1.125 1.125 0 01-1.592 0L7.586 7.207a.75.75 0 010-1.06z" clip-rule="evenodd" />
<path fill-rule="evenodd" d="M4.5 17.5a.75.75 0 01-.75-.75V14.5a.75.75 0 011.5 0v2.25a.75.75 0 01-.75.75zM12 17.5a.75.75 0 01-.75-.75V14.5a.75.75 0 011.5 0v2.25a.75.75 0 01-.75.75zM19.5 17.5a.75.75 0 01-.75-.75V14.5a.75.75 0 011.5 0v2.25a.75.75 0 01-.75.75z" clip-rule="evenodd" />
</svg>
<span class="block">REMOVE</span>
</button>
<a href="#" class="px-4 py-2 bg-sapphire-700 text-white rounded-md text-sm hover:bg-sapphire-600 focus:outline-none focus:ring-2 focus:ring-sapphire-500 transition-all duration-300 shadow-md shadow-sapphire-900/50 dark:bg-blue-700 dark:hover:bg-blue-600 dark:focus:ring-blue-500 dark:shadow-blue-900/50">View Analytics</a>
</div>
</div>
<!-- Watchlist Item 4 (Example NFT) -->
<div class="bg-neutral-800/80 rounded-lg p-6 border border-emerald-700 shadow-lg shadow-emerald-900/30 hover:shadow-emerald-700/50 transition-all duration-300 transform hover:-translate-y-1 hover:scale-[1.01] overflow-hidden relative dark:bg-gray-900/80 dark:border-teal-600 dark:shadow-teal-900/30 dark:hover:shadow-teal-700/50 ascend-animation">
<div class="absolute top-0 right-0 h-4 w-16 bg-gradient-to-r from-transparent via-ruby-500/50 to-ruby-500/80 dark:via-red-500/50 dark:to-red-500/80 transform origin-top-right skew-x-[-20deg] z-0"></div>
<div class="flex items-center mb-4 relative z-10">
<img src="https://picsum.photos/seed/nft/60/60" alt="NFT" class="w-16 h-16 rounded-full border-2 border-ruby-400 ring-2 ring-ruby-600 dark:border-red-400 dark:ring-red-600 shadow-md mr-4 aspect-square object-cover">
<div>
<h3 class="text-2xl font-bold text-ruby-300 dark:text-red-300">CYBERPUNK APE</h3>
<p class="text-ruby-500 dark:text-red-500">#1337 NFT</p>
</div>
</div>
<div class="text-lg mb-4 leading-relaxed relative z-10">
<p class="flex justify-between items-center mb-1"><span class="text-emerald-400 dark:text-teal-400">Floor Price:</span> <span class="text-white font-bold text-xl">12.5 ETH</span></p>
<p class="flex justify-between items-center mb-1"><span class="text-emerald-400 dark:text-teal-400">Owner:</span> <span class="text-white">0xAbCd...123F</span></p>
<p class="flex justify-between items-center"><span class="text-emerald-400 dark:text-teal-400">Collection:</span> <span class="text-white">BioMech Beasts</span></p>
</div>
<div class="flex justify-between items-center border-t border-emerald-700 pt-4 relative z-10 dark:border-teal-600">
<button class="text-fuchsia-400 hover:text-fuchsia-300 transition-colors duration-300 flex items-center group">
<svg class="w-6 h-6 mr-1 text-red-500 group-hover:text-red-400" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10.788 3.212c.44-.44 1.092-.44 1.532 0l4.314 4.314a1.125 1.125 0 010 1.592l-4.314 4.314a1.125 1.125 0 01-1.592 0l-4.314-4.314a1.125 1.125 0 010-1.592l4.314-4.314z" clip-rule="evenodd" />
<path fill-rule="evenodd" d="M7.646 6.146a.75.75 0 011.06 0L12 9.49l3.293-3.344a.75.75 0 111.06 1.06L13.06 10.551a1.125 1.125 0 01-1.592 0L7.586 7.207a.75.75 0 010-1.06z" clip-rule="evenodd" />
<path fill-rule="evenodd" d="M4.5 17.5a.75.75 0 01-.75-.75V14.5a.75.75 0 011.5 0v2.25a.75.75 0 01-.75.75zM12 17.5a.75.75 0 01-.75-.75V14.5a.75.75 0 011.5 0v2.25a.75.75 0 01-.75.75zM19.5 17.5a.75.75 0 01-.75-.75V14.5a.75.75 0 011.5 0v2.25a.75.75 0 01-.75.75z" clip-rule="evenodd" />
</svg>
<span class="block">REMOVE</span>
</button>
<a href="#" class="px-4 py-2 bg-sapphire-700 text-white rounded-md text-sm hover:bg-sapphire-600 focus:outline-none focus:ring-2 focus:ring-sapphire-500 transition-all duration-300 shadow-md shadow-sapphire-900/50 dark:bg-blue-700 dark:hover:bg-blue-600 dark:focus:ring-blue-500 dark:shadow-blue-900/50">View Protocol</a>
</div>
</div>
</div>
<!-- Pagination/Footer - Example of more interactive elements for complexity -->
<div class="mt-12 flex flex-col md:flex-row items-center justify-between text-sm text-emerald-500 dark:text-teal-500 border-t border-emerald-800 pt-8 dark:border-teal-800">
<div class="mb-4 md:mb-0">
<p>© 2077 Nexus Watch. All Cyber-Rights Reserved.</p>
</div>
<div class="flex space-x-4">
<button class="px-4 py-2 bg-neutral-800 border border-emerald-700 rounded-md hover:bg-neutral-700 transition-all duration-300 dark:bg-gray-900 dark:border-teal-700 dark:hover:bg-gray-800">Previous</button>
<span class="px-4 py-2">Page 1 of 3</span>
<button class="px-4 py-2 bg-neutral-800 border border-emerald-700 rounded-md hover:bg-neutral-700 transition-all duration-300 dark:bg-gray-900 dark:border-teal-700 dark:hover:bg-gray-800">Next</button>
</div>
</div>
</div>
</div>
<!-- Custom Styles for animations and colors not derivable directly from Tailwind defaults -->
<style>
@keyframes pulse-slow {
0% { opacity: 0.1; }
50% { opacity: 0.3; }
100% { opacity: 0.1; }
}
.animate-pulse-slow {
animation: pulse-slow 6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes ascend {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.ascend-animation {
animation: ascend 0.5s ease-out forwards;
opacity: 0; /* Ensures elements are hidden before animation */
}
.ascend-animation:nth-child(1) { animation-delay: 0.1s; }
.ascend-animation:nth-child(2) { animation-delay: 0.2s; }
.ascend-animation:nth-child(3) { animation-delay: 0.3s; }
.ascend-animation:nth-child(4) { animation-delay: 0.4s; }
.ascend-animation:nth-child(5) { animation-delay: 0.5s; }
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fade-in-animation {
animation: fadeIn 0.8s ease-out forwards;
}
/* Custom Colors for 'Jewel Tones' not directly in Tailwind default palette */
.text-emerald-300 { color: #6ee7b7; }
.text-emerald-400 { color: #34d399; }
.text-emerald-500 { color: #10b981; }
.text-emerald-600 { color: #059669; }
.text-emerald-700 { color: #047857; }
.text-emerald-800 { color: #065f46; }
.text-emerald-900\/50 { background-color: rgba(6, 95, 70, 0.5); }
.shadow-emerald-900\/50 { box-shadow: 0 25px 50px -12px rgba(6, 95, 70, 0.5); }
.hover\:shadow-emerald-700\/50:hover { box-shadow: 0 10px 15px -3px rgba(4, 120, 87, 0.5), 0 4px 6px -2px rgba(4, 120, 87, 0.5); }
.bg-fuchsia-700 { background-color: #c026d3; }
.hover\:bg-fuchsia-600:hover { background-color: #a21caf; }
.focus\:ring-fuchsia-500:focus { --tw-ring-color: #d946ef; }
.shadow-fuchsia-900\/50 { box-shadow: 0 25px 50px -12px rgba(109, 40, 217, 0.5); }
.text-fuchsia-300 { color: #E794FC; }
.text-fuchsia-400 { color: #E06FFC; }
.text-fuchsia-500 { color: #B300C3; }
.via-fuchsia-500\/50 { background-image: linear-gradient(to right, transparent, rgba(233, 213, 255, 0.5), transparent); }
.to-fuchsia-500\/80 { background-image: linear-gradient(to right, transparent, transparent, rgba(233, 213, 255, 0.8)); }
.ring-fuchsia-600 { --tw-ring-color: #E75AFB; }
.border-fuchsia-400 { border-color: #E794FC; }
.bg-sapphire-700 { background-color: #0d47a1; /* Deep Blue from Material Design */ }
.hover\:bg-sapphire-600:hover { background-color: #1565c0; }
.focus\:ring-sapphire-500:focus { --tw-ring-color: #2196f3; }
.shadow-sapphire-900\/50 { box-shadow: 0 25px 50px -12px rgba(13, 71, 161, 0.5); }
.text-sapphire-300 { color: #64B5F6; }
.text-sapphire-500 { color: #2196F3; }
.via-sapphire-500\/50 { background-image: linear-gradient(to right, transparent, rgba(33, 150, 243, 0.5), transparent); }
.to-sapphire-500\/80 { background-image: linear-gradient(to right, transparent, transparent, rgba(33, 150, 243, 0.8)); }
.ring-sapphire-600 { --tw-ring-color: #1976D2; }
.border-sapphire-400 { border-color: #64B5F6; }
.bg-ruby-700 { background-color: #b71c1c; /* Deep Red from Material Design */ }
.hover\:bg-ruby-600:hover { background-color: #c62828; }
.focus\:ring-ruby-500:focus { --tw-ring-color: #ef5350; }
.shadow-ruby-900\/50 { box-shadow: 0 25px 50px -12px rgba(183, 28, 28, 0.5); }
.text-ruby-300 { color: #E57373; }
.text-ruby-500 { color: #F44336; }
.via-ruby-500\/50 { background-image: linear-gradient(to right, transparent, rgba(244, 67, 54, 0.5), transparent); }
.to-ruby-500\/80 { background-image: linear-gradient(to right, transparent, transparent, rgba(244, 67, 54, 0.8)); }
.ring-ruby-600 { --tw-ring-color: #D32F2F; }
.border-ruby-400 { border-color: #E57373; }
/* Dark Mode Custom Colors */
.dark\:text-teal-300 { color: #5eead4; }
.dark\:text-teal-400 { color: #2dd4bf; }
.dark\:text-teal-500 { color: #14b8a6; }
.dark\:border-teal-600 { border-color: #0d9488; }
.dark\:border-teal-700 { border-color: #0f766e; }
.dark\:border-teal-800 { border-color: #115e59; }
.dark\:shadow-teal-900\/50 { box-shadow: 0 25px 50px -12px rgba(17, 94, 89, 0.5); }
.dark\:hover\:shadow-teal-700\/50:hover { box-shadow: 0 10px 15px -3px rgba(15, 118, 110, 0.5), 0 4px 6px -2px rgba(15, 118, 110, 0.5); }
.dark\:ring-teal-600 { --tw-ring-color: #0d9488; }
.dark\:border-teal-400 { border-color: #2dd4bf; }
.dark\:bg-purple-700 { background-color: #7e22ce; }
.dark\:hover\:bg-purple-600:hover { background-color: #6d28d9; }
.dark\:focus\:ring-purple-500:focus { --tw-ring-color: #a855f7; }
.dark\:shadow-purple-900\/50 { box-shadow: 0 25px 50px -12px rgba(91, 33, 182, 0.5); }
.dark\:text-purple-300 { color: #c4b5fd; }
.dark\:text-purple-500 { color: #8b5cf6; }
.dark\:via-purple-500\/50 { background-image: linear-gradient(to right, transparent, rgba(168, 85, 247, 0.5), transparent); }
.dark\:to-purple-500\/80 { background-image: linear-gradient(to right, transparent, transparent, rgba(168, 85, 247, 0.8)); }
.dark\:ring-purple-600 { --tw-ring-color: #7c3aed; }
.dark\:border-purple-400 { border-color: #a78bfa; }
.dark\:bg-blue-700 { background-color: #1d4ed8; }
.dark\:hover\:bg-blue-600:hover { background-color: #2563eb; }
.dark\:focus\:ring-blue-500:focus { --tw-ring-color: #3b82f6; }
.dark\:shadow-blue-900\/50 { box-shadow: 0 25px 50px -12px rgba(29, 78, 216, 0.5); }
.dark\:text-blue-300 { color: #93c5fd; }
.dark\:text-blue-500 { color: #3b82f6; }
.dark\:via-blue-500\/50 { background-image: linear-gradient(to right, transparent, rgba(59, 130, 246, 0.5), transparent); }
.dark\:to-blue-500\/80 { background-image: linear-gradient(to right, transparent, transparent, rgba(59, 130, 246, 0.8)); }
.dark\:ring-blue-600 { --tw-ring-color: #2563eb; }
.dark\:border-blue-400 { border-color: #60a5fa; }
.dark\:bg-red-700 { background-color: #dc2626; }
.dark\:hover\:bg-red-600:hover { background-color: #ef4444; }
.dark\:focus\:ring-red-500:focus { --tw-ring-color: #ef4444; }
.dark\:shadow-red-900\/50 { box-shadow: 0 25px 50px -12px rgba(220, 38, 38, 0.5); }
.dark\:text-red-300 { color: #fca5a5; }
.dark\:text-red-500 { color: #ef4444; }
.dark\:via-red-500\/50 { background-image: linear-gradient(to right, transparent, rgba(239, 68, 68, 0.5), transparent); }
.dark\:to-red-500\/80 { background-image: linear-gradient(to right, transparent, transparent, rgba(239, 68, 68, 0.8)); }
.dark\:ring-red-600 { --tw-ring-color: #dc2626; }
.dark\:border-red-400 { border-color: #fda4af; }
</style>
</div>Related Components
Wishlist Component
A complex, responsive wishlist component with a retro/vintage design, earth tone color scheme, and dark mode support, suitable for a blog or content site.
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.
Wishlist Component
Complex Skeuomorphism Wishlist Component with Complementary color scheme, for Social Media purposes. Responsive, with Dark Theme support.