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 Navbar With CTA Button</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-slate-50"> <nav class="bg-white/80 backdrop-blur-md sticky top-0 z-50 border-b border-slate-200" x-data="{ open: false }"> <div class="max-w-7xl mx-auto px-6 md:px-12 h-20 flex items-center justify-between"> <!-- Brand --> <a href="##" class="text-2xl font-bold bg-gradient-to-r from-blue-600 to-indigo-600 bg-clip-text text-transparent">SaaSify</a> <!-- Desktop Links --> <div class="hidden md:flex items-center space-x-10"> <a href="##" class="text-slate-600 hover:text-blue-600 font-semibold transition">Product</a> <a href="##" class="text-slate-600 hover:text-blue-600 font-semibold transition">Customers</a> <a href="##" class="text-slate-600 hover:text-blue-600 font-semibold transition">Pricing</a> <a href="##" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2.5 rounded-full font-bold shadow-lg shadow-blue-200 transition-all hover:-translate-y-0.5 active:translate-y-0">Start Free Trial</a> </div> <!-- Mobile Button --> <button @click="open = !open" class="md:hidden p-2 rounded-lg bg-slate-100 text-slate-800"> <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path x-show="!open" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> <path x-show="open" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> </svg> </button> </div> <!-- Mobile Navigation --> <div class="md:hidden bg-white border-t border-slate-100 p-6 space-y-4" x-show="open" @click.away="open = false"> <a href="##" class="block text-slate-700 font-semibold">Product</a> <a href="##" class="block text-slate-700 font-semibold">Customers</a> <a href="##" class="block text-slate-700 font-semibold">Pricing</a> <a href="##" class="block bg-blue-600 text-white text-center py-3 rounded-xl font-bold">Start Free Trial</a> </div> </nav> <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> </body> </html>
