Dark Mode Navbar

<nav class="flex items-center justify-between px-10 py-5 border-b border-zinc-800 bg-zinc-950">
        <div class="text-white font-black text-xl tracking-tighter">DARKUI</div>
        <div class="hidden lg:flex gap-10 text-zinc-400 text-sm font-medium">
            <a href="#" class="hover:text-white">Features</a>
            <a href="#" class="hover:text-white">Enterprise</a>
            <a href="#" class="hover:text-white">Pricing</a>
        </div>
        <div class="flex gap-4">
            <button class="text-zinc-400 font-medium px-4">Login</button>
            <button
                class="bg-white text-black px-6 py-2 rounded font-bold hover:bg-zinc-200 transition-colors">Join</button>
        </div>
    </nav>
    <script>
        document.querySelectorAll('button').forEach(btn => {
            btn.addEventListener('mousedown', function () { this.classList.add('scale-95'); });
            btn.addEventListener('mouseup', function () { this.classList.remove('scale-95'); });
        });
    </script>