Toggle navigation
☰
HTML
CSS
Scripting
Database
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tailwind CSS Gradient Navbar</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-gray-50 h-screen"> <nav class="bg-gradient-to-r from-fuchsia-600 via-purple-600 to-indigo-600 text-white shadow-2xl" x-data="{ open: false }"> <div class="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between"> <!-- Brand --> <a href="##" class="flex items-center space-x-3 group"> <div class="w-10 h-10 rounded-xl bg-white/20 backdrop-blur-md flex items-center justify-center transition-all group-hover:rotate-12 group-hover:scale-110"> <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" /> </svg> </div> <span class="text-2xl font-black tracking-widest uppercase">Prism</span> </a> <!-- Desktop Links --> <div class="hidden lg:flex items-center space-x-12"> <a href="##" class="text-sm font-bold text-white/80 hover:text-white transition uppercase tracking-widest decoration-white/30 decoration-2 underline-offset-8 hover:underline">Features</a> <a href="##" class="text-sm font-bold text-white/80 hover:text-white transition uppercase tracking-widest decoration-white/30 decoration-2 underline-offset-8 hover:underline">Solutions</a> <a href="##" class="text-sm font-bold text-white/80 hover:text-white transition uppercase tracking-widest decoration-white/30 decoration-2 underline-offset-8 hover:underline">Pricing</a> <button class="bg-white text-indigo-600 px-8 py-3 rounded-full text-xs font-black uppercase shadow-xl hover:-translate-y-1 active:translate-y-0 shadow-indigo-600/20 transition-all">Join Early</button> </div> <!-- Mobile Button --> <button @click="open = !open" class="lg:hidden p-2 text-white/80 hover:text-white"> <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> </svg> </button> </div> <!-- Mobile Navigation --> <div x-show="open" @click.away="open = false" x-transition class="lg:hidden bg-indigo-700/95 backdrop-blur-md px-6 py-10 space-y-6 " style="display: none;" > <a href="##" class="block text-2xl font-black text-white hover:text-fuchsia-300">Features</a> <a href="##" class="block text-2xl font-black text-white hover:text-fuchsia-300">Solutions</a> <a href="##" class="block text-2xl font-black text-white hover:text-fuchsia-300 border-b border-white/10 pb-6 uppercase tracking-widest">Pricing</a> <button class="block w-full bg-white text-indigo-600 py-4 rounded-full font-black text-lg uppercase shadow-2xl">Join Early</button> </div> </nav> <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> </body> </html>
