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 Search Bar</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-gray-50"> <nav class="bg-white px-4 shadow-sm" x-data="{ open: false, searchOpen: false }"> <div class="max-w-7xl mx-auto h-16 flex items-center justify-between gap-4"> <!-- Brand --> <div class="flex items-center shrink-0"> <div class="w-10 h-10 bg-emerald-500 rounded-lg flex items-center justify-center text-white font-black text-xl">S</div> <span class="ml-2 hidden sm:block font-bold text-gray-800">SearchFlow</span> </div> <!-- Search Bar (Desktop) --> <div class="hidden md:flex flex-1 max-w-lg relative group"> <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> <svg class="h-5 w-5 text-gray-400 group-focus-within:text-emerald-500 transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <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" /> </svg> </div> <input type="text" placeholder="Search for articles, videos, and more..." class="block w-full bg-gray-100 border-transparent rounded-full py-2.5 pl-10 pr-4 text-sm focus:bg-white focus:ring-2 focus:ring-emerald-500 focus:border-transparent transition-all outline-none" > </div> <!-- Action Icons --> <div class="flex items-center space-x-2 sm:space-x-4 shrink-0"> <!-- Mobile Search Toggle --> <button @click="searchOpen = !searchOpen" class="md:hidden p-2 text-gray-500 hover:bg-gray-100 rounded-full transition"> <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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /> </svg> </button> <button class="hidden sm:block text-gray-600 hover:text-emerald-600 font-medium text-sm transition">Sign In</button> <button class="bg-emerald-600 hover:bg-emerald-700 text-white px-5 py-2 rounded-full text-sm font-bold shadow-lg shadow-emerald-100 transition">Join Free</button> <!-- Mobile Menu Toggle --> <button @click="open = !open" class="md:hidden p-2 text-gray-500 hover:bg-gray-100 rounded-lg transition"> <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> </div> <!-- Mobile Search Overlay --> <div x-show="searchOpen" class="md:hidden border-t border-gray-100 py-3" style="display: none;"> <div class="relative px-2"> <input type="text" placeholder="Type to search..." class="w-full bg-gray-100 rounded-lg py-2 pl-4 pr-10 outline-none focus:ring-2 focus:ring-emerald-500" > <button @click="searchOpen = false" class="absolute right-4 top-1/2 -translate-y-1/2 text-gray-400"> <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> </svg> </button> </div> </div> <!-- Mobile Menu --> <div class="md:hidden py-4 border-t border-gray-50" x-show="open" @click.away="open = false"> <div class="px-4 space-y-4"> <a href="##" class="block font-semibold text-gray-700">Explore Categories</a> <a href="##" class="block font-semibold text-gray-700">Trending Now</a> <a href="##" class="block font-semibold text-gray-700">Premium Plans</a> </div> </div> </nav> <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> </body> </html>
