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 Multi Select Dropdown Menu</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, selected: [1, 3], items: [{id: 1, name: 'Core Engine'}, {id: 2, name: 'Mesh Logic'}, {id: 3, name: 'Neural Links'}, {id: 4, name: 'Temporal Hub'}], toggle(id) { if (this.selected.includes(id)) { this.selected = this.selected.filter(i => i !== id); } else { this.selected.push(id); } } }"> <div class="relative"> <!-- Trigger --> <button @click="open = !open" class="w-72 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:shadow-md transition-all group" > <div class="flex items-center gap-2 overflow-hidden"> <template x-if="selected.length === 0"> <span class="text-slate-400 font-medium italic">Configure Stack...</span> </template> <template x-if="selected.length > 0"> <div class="flex gap-1"> <span class="px-2 py-0.5 bg-indigo-50 text-indigo-600 text-[10px] font-black uppercase tracking-tighter rounded-md border border-indigo-100" x-text="selected.length + ' Active'"></span> </div> </template> </div> <svg class="h-4 w-4 text-slate-300 group-hover:text-indigo-600 transition-colors" 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-300" x-transition:enter-start="opacity-0 translate-y-4 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-[2.5rem] shadow-4xl z-50 overflow-hidden p-3" style="display: none;" > <div class="px-5 pt-5 pb-3"> <h4 class="text-[10px] font-black text-slate-400 uppercase tracking-widest italic">Resource Manifest</h4> </div> <div class="space-y-1"> <template x-for="item in items"> <div @click="toggle(item.id)" class="flex items-center justify-between px-5 py-4 hover:bg-slate-50 rounded-[1.5rem] transition-all cursor-pointer group" > <div class="flex items-center gap-3"> <div class="h-5 w-5 rounded-lg border-2 flex items-center justify-center transition-all" :class="selected.includes(item.id) ? 'bg-indigo-600 border-indigo-600 shadow-lg shadow-indigo-100' : 'bg-white border-slate-200'" > <svg x-show="selected.includes(item.id)" class="h-3 w-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M5 13l4 4L19 7" /></svg> </div> <span class="text-xs font-bold text-slate-700 transition-colors group-hover:text-indigo-600" x-text="item.name"></span> </div> <input type="checkbox" class="sr-only" :checked="selected.includes(item.id)" > </div> </template> </div> <div class="mt-4 p-2 bg-slate-50/50 rounded-[1.5rem] flex justify-between items-center px-4 py-3"> <button @click="selected = []" class="text-[9px] font-black text-slate-400 uppercase tracking-widest hover:text-rose-600 transition-colors cursor-pointer">Flush All</button> <button @click="open = false" class="px-4 py-2 bg-slate-900 text-white text-[9px] font-black uppercase tracking-widest rounded-xl hover:bg-indigo-600 transition-colors shadow-lg shadow-slate-200 cursor-pointer">Commit Sync</button> </div> </div> </div> <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> </body> </html>
