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 Dropdown With Search</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-gray-50 flex justify-center min-h-screen pt-32 antialiased" x-data="{ open: true, search: '', items: ['Alpha Core', 'Beta Link', 'Gamma Pulse', 'Delta Mesh', 'Epsilon Node'] }"> <div class="relative"> <!-- Trigger --> <button @click="open = !open" class="w-64 px-6 py-4 bg-white border border-slate-200 rounded-3xl shadow-sm text-sm font-bold text-slate-700 flex justify-between items-center cursor-pointer hover:border-indigo-200 transition-colors" > Select Segment <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 9l-7 7-7-7" /></svg> </button> <!-- Menu --> <div x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 translate-y-2 scale-95" x-transition:enter-end="opacity-100 translate-y-0 scale-100" class="absolute left-0 mt-3 w-80 bg-white border border-slate-100 rounded-[2rem] shadow-4xl z-50 overflow-hidden" style="display: none;" > <!-- Search Input --> <div class="p-4 bg-slate-50 border-b border-slate-100"> <div class="relative"> <input type="text" x-model="search" placeholder="Filter nodes..." class="w-full h-11 bg-white border border-slate-200 rounded-2xl pl-11 pr-4 text-xs font-bold text-slate-700 focus:border-indigo-500 focus:ring-4 focus:ring-indigo-500/10 outline-none transition-all italic" > <svg class="absolute left-4 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg> </div> </div> <!-- Item List --> <div class="max-h-64 overflow-y-auto p-2"> <template x-for="item in items.filter(i => i.toLowerCase().includes(search.toLowerCase()))"> <button class="w-full flex items-center gap-3 px-4 py-3 text-xs font-black text-slate-600 rounded-2xl hover:bg-indigo-50 hover:text-indigo-600 transition-all cursor-pointer uppercase tracking-widest"> <div class="h-1.5 w-1.5 bg-indigo-200 rounded-full"></div> <span x-text="item"></span> </button> </template> <div x-show="items.filter(i => i.toLowerCase().includes(search.toLowerCase())).length === 0" class="p-8 text-center"> <p class="text-[10px] font-black text-slate-300 uppercase tracking-widest italic">No node matches sync</p> </div> </div> </div> </div> <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> </body> </html>
