A complex, responsive navigation bar for cryptocurrency/blockchain applications with an artistic, watercolor-inspired design and a bright, neon color scheme. Includes dark mode support and interactive elements.
<header class="w-full bg-gradient-to-br from-purple-900 via-pink-800 to-indigo-900 bg-[length:200%_200%] animate-gradient-xy shadow-xl dark:from-gray-950 dark:via-gray-800 dark:to-black transition-colors duration-500">
<div class="container mx-auto px-4 py-4 md:py-6 flex justify-between items-center relative z-10">
<!-- Logo/Brand Name -->
<a href="#" class="flex items-center space-x-2">
<svg class="w-8 h-8 md:w-10 md:h-10 text-lime-400 drop-shadow-[0_0_8px_rgba(163,230,53,0.7)] transform transition-transform duration-300 hover:scale-110" 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="M9.75 17L9 20l-1 1h8l-1-1-1.75-3M3 13l3-3m0 0l3-3m-3 3h12m0 0l3 3m0-3l-3-3m-8.5 6h.5a2 2 0 012 2v2a2 2 0 01-2 2h-.5a2 2 0 01-2-2v-2a2 2 0 012-2zM9 13a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path>
</svg>
<span class="text-3xl md:text-4xl font-extrabold text-white tracking-wider drop-shadow-md text-transparent bg-clip-text bg-gradient-to-r from-lime-400 to-cyan-400 dark:from-yellow-300 dark:to-purple-300 transition-colors duration-500">QuantumLedger</span>
</a>
<!-- Desktop Navigation -->
<nav class="hidden lg:flex space-x-8 xl:space-x-12 items-center">
<a href="#" class="text-lg font-semibold text-white px-3 py-2 rounded-lg relative overflow-hidden group transition-all duration-300 transform hover:-translate-y-0.5">
<span class="relative z-10 text-shadow-neon group-hover:text-cyan-300 dark:group-hover:text-fuchsia-300 transition-colors duration-300">Dashboard</span>
<span class="absolute inset-0 bg-gradient-to-r from-cyan-500 to-indigo-600 opacity-0 group-hover:opacity-30 rounded-lg blur-sm transition-opacity duration-300"></span>
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-gradient-to-r from-lime-400 to-pink-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
</a>
<a href="#" class="text-lg font-semibold text-white px-3 py-2 rounded-lg relative overflow-hidden group transition-all duration-300 transform hover:-translate-y-0.5">
<span class="relative z-10 text-shadow-neon group-hover:text-cyan-300 dark:group-hover:text-fuchsia-300 transition-colors duration-300">Transactions</span>
<span class="absolute inset-0 bg-gradient-to-r from-cyan-500 to-indigo-600 opacity-0 group-hover:opacity-30 rounded-lg blur-sm transition-opacity duration-300"></span>
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-gradient-to-r from-lime-400 to-pink-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
</a>
<a href="#" class="text-lg font-semibold text-white px-3 py-2 rounded-lg relative overflow-hidden group transition-all duration-300 transform hover:-translate-y-0.5">
<span class="relative z-10 text-shadow-neon group-hover:text-cyan-300 dark:group-hover:text-fuchsia-300 transition-colors duration-300">Portfolio</span>
<span class="absolute inset-0 bg-gradient-to-r from-cyan-500 to-indigo-600 opacity-0 group-hover:opacity-30 rounded-lg blur-sm transition-opacity duration-300"></span>
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-gradient-to-r from-lime-400 to-pink-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
</a>
<div class="relative group">
<button class="text-lg font-semibold text-white px-3 py-2 rounded-lg flex items-center space-x-1 relative overflow-hidden group transition-all duration-300 transform hover:-translate-y-0.5">
<span class="relative z-10 text-shadow-neon group-hover:text-cyan-300 dark:group-hover:text-fuchsia-300 transition-colors duration-300">Tools</span>
<svg class="w-4 h-4 ml-1 text-white group-hover:text-cyan-300 transition-colors 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="M19 9l-7 7-7-7"></path></svg>
<span class="absolute inset-0 bg-gradient-to-r from-cyan-500 to-indigo-600 opacity-0 group-hover:opacity-30 rounded-lg blur-sm transition-opacity duration-300"></span>
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-gradient-to-r from-lime-400 to-pink-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
</button>
<div class="absolute hidden group-hover:block top-full left-1/2 -translate-x-1/2 mt-3 p-2 bg-gradient-to-br from-purple-800/90 to-indigo-800/90 dark:from-gray-900/90 dark:to-black/90 backdrop-blur-md rounded-xl shadow-lg border border-lime-400/30 min-w-[160px]">
<a href="#" class="block px-4 py-2 text-white text-md font-medium hover:bg-lime-400/20 rounded-md transition-colors duration-200">Staking</a>
<a href="#" class="block px-4 py-2 text-white text-md font-medium hover:bg-lime-400/20 rounded-md transition-colors duration-200">NFTs</a>
<a href="#" class="block px-4 py-2 text-white text-md font-medium hover:bg-lime-400/20 rounded-md transition-colors duration-200">Analytics</a>
</div>
</div>
<a href="#" class="text-lg font-semibold text-white px-3 py-2 rounded-lg relative overflow-hidden group transition-all duration-300 transform hover:-translate-y-0.5">
<span class="relative z-10 text-shadow-neon group-hover:text-cyan-300 dark:group-hover:text-fuchsia-300 transition-colors duration-300">Support</span>
<span class="absolute inset-0 bg-gradient-to-r from-cyan-500 to-indigo-600 opacity-0 group-hover:opacity-30 rounded-lg blur-sm transition-opacity duration-300"></span>
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-gradient-to-r from-lime-400 to-pink-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
</a>
</nav>
<!-- User Controls & Mobile Toggle -->
<div class="flex items-center space-x-4 md:space-x-6">
<button aria-label="search" class="text-white hover:text-cyan-400 transition-colors duration-200 hidden md:block">
<svg class="w-6 h-6" 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>
</button>
<button aria-label="Toggle Dark Mode" class="focus:outline-none text-white hover:text-cyan-400 dark:hover:text-yellow-300 transition-colors duration-300" onclick="document.documentElement.classList.toggle('dark')">
<svg class="w-6 h-6 hidden dark:block" 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="M12 3v1m0 16v1m9-9h1M3 12H2m8.006-7.39l.71-.71m-1.42 1.42l-.71-.71M19.004 4.39l.71.71m-1.42-1.42l-.71.71M18 12a6 6 0 11-12 0 6 6 0 0112 0z"></path></svg>
<svg class="w-6 h-6 dark:hidden" 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="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path></svg>
</button>
<button aria-label="user profile" class="hidden sm:inline-flex items-center space-x-2 bg-gradient-to-r from-lime-500 to-pink-500 hover:from-lime-400 hover:to-pink-400 dark:from-yellow-400 dark:to-purple-500 dark:hover:from-yellow-300 dark:hover:to-purple-400 text-white font-bold py-2 px-4 rounded-full shadow-lg transform transition-all duration-300 hover:scale-105 active:scale-95">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-8 h-8 rounded-full border-2 border-white/50 shadow-md">
<span class="hidden md:block">John Doe</span>
</button>
<!-- Mobile Toggle Button -->
<button id="mobile-menu-button" class="lg:hidden focus:outline-none text-white hover:text-cyan-400 dark:hover:text-fuchsia-300 transition-colors duration-300 z-20" aria-label="Open mobile menu">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path id="menu-icon-open" class="block" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
<path id="menu-icon-close" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
</div>
<!-- Mobile Menu Overlay -->
<div id="mobile-menu" class="hidden lg:hidden fixed inset-0 bg-gradient-to-br from-purple-900/95 via-pink-800/95 to-indigo-900/95 dark:from-gray-950/95 dark:via-gray-800/95 dark:to-black/95 z-40 flex flex-col items-center justify-center space-y-8 animate-fade-in-down transition-opacity duration-300 pointer-events-none opacity-0">
<nav class="flex flex-col space-y-6 text-center">
<a href="#" class="text-3xl font-extrabold text-white text-shadow-neon active:text-lime-400 transition-colors duration-200 transform hover:scale-105">Dashboard</a>
<a href="#" class="text-3xl font-extrabold text-white text-shadow-neon active:text-lime-400 transition-colors duration-200 transform hover:scale-105">Transactions</a>
<a href="#" class="text-3xl font-extrabold text-white text-shadow-neon active:text-lime-400 transition-colors duration-200 transform hover:scale-105">Portfolio</a>
<div class="relative group">
<button class="text-3xl font-extrabold text-white text-shadow-neon active:text-lime-400 transition-colors duration-200 transform hover:scale-105 flex items-center justify-center">
Tools
<svg class="w-6 h-6 ml-2 text-white" 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="M19 9l-7 7-7-7"></path></svg>
</button>
<div class="mt-4 p-2 bg-gradient-to-br from-purple-800/90 to-indigo-800/90 dark:from-gray-900/90 dark:to-black/90 backdrop-blur-md rounded-xl shadow-lg border border-lime-400/30 w-48 mx-auto hidden group-hover:block transition-all duration-300">
<a href="#" class="block px-4 py-2 text-white text-xl font-medium hover:bg-lime-400/20 rounded-md transition-colors duration-200">Staking</a>
<a href="#" class="block px-4 py-2 text-white text-xl font-medium hover:bg-lime-400/20 rounded-md transition-colors duration-200">NFTs</a>
<a href="#" class="block px-4 py-2 text-white text-xl font-medium hover:bg-lime-400/20 rounded-md transition-colors duration-200">Analytics</a>
</div>
</div>
<a href="#" class="text-3xl font-extrabold text-white text-shadow-neon active:text-lime-400 transition-colors duration-200 transform hover:scale-105">Support</a>
</nav>
<button aria-label="search" class="mt-8 text-white hover:text-cyan-400 transition-colors duration-200">
<svg class="w-10 h-10" 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>
</button>
</div>
</header>
<!-- Just for demonstration of responsiveness and dark mode -->
<main class="min-h-screen bg-gray-100 dark:bg-gray-800 p-8 transition-colors duration-500 flex flex-col justify-center items-center text-center">
<h1 class="text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-indigo-600 dark:from-lime-400 dark:to-cyan-400 mb-6">Welcome to QuantumLedger</h1>
<p class="text-xl text-gray-700 dark:text-gray-300 max-w-xl">Explore the future of decentralized finance with our intuitive and secure platform.</p>
</main>
<style>
/* This is for the custom gradient animation */
@keyframes gradient-xy {
0% { background-position: 0% 0%; }
50% { background-position: 100% 100%; }
100% { background-position: 0% 0%; }
}
/* This is for potential mobile menu animation */
@keyframes fade-in-down {
from { opacity: 0; transform: translateY(-20px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-gradient-xy {
animation: gradient-xy 15s ease infinite;
}
.text-shadow-neon {
text-shadow: 0 0 5px rgba(255, 255, 255, 0.7), 0 0 10px var(--tw-neon-color, rgba(0, 255, 255, 0.5)), 0 0 15px var(--tw-neon-color, rgba(0, 255, 255, 0.3));
--tw-neon-color: theme('colors.cyan.400'); /* Default neon color */
}
.dark .text-shadow-neon {
--tw-neon-color: theme('colors.fuchsia.300'); /* Dark mode neon color */
}
.animate-fade-in-down {
animation: fade-in-down 0.3s ease-out forwards;
}
</style>
<script>
// Basic JavaScript to toggle mobile menu visibility
document.getElementById('mobile-menu-button').addEventListener('click', function() {
const mobileMenu = document.getElementById('mobile-menu');
const openIcon = document.getElementById('menu-icon-open');
const closeIcon = document.getElementById('menu-icon-close');
if (mobileMenu.classList.contains('hidden')) {
mobileMenu.classList.remove('hidden');
mobileMenu.classList.remove('opacity-0', 'pointer-events-none');
mobileMenu.classList.add('opacity-100', 'pointer-events-auto');
openIcon.classList.add('hidden');
closeIcon.classList.remove('hidden');
} else {
mobileMenu.classList.remove('opacity-100', 'pointer-events-auto');
mobileMenu.classList.add('opacity-0', 'pointer-events-none');
// Add a small delay before hiding to allow fade-out animation
setTimeout(() => {
mobileMenu.classList.add('hidden');
}, 300);
openIcon.classList.remove('hidden');
closeIcon.classList.add('hidden');
}
});
// Close mobile menu when a link is clicked
document.querySelectorAll('#mobile-menu a').forEach(item => {
item.addEventListener('click', () => {
const mobileMenu = document.getElementById('mobile-menu');
const openIcon = document.getElementById('menu-icon-open');
const closeIcon = document.getElementById('menu-icon-close');
mobileMenu.classList.remove('opacity-100', 'pointer-events-auto');
mobileMenu.classList.add('opacity-0', 'pointer-events-none');
setTimeout(() => {
mobileMenu.classList.add('hidden');
}, 300);
openIcon.classList.remove('hidden');
closeIcon.classList.add('hidden');
});
});
</script>
