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</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-indigo-50 flex items-center justify-center min-h-screen p-6 antialiased" x-data="{ open: false, selected: ['Security', 'Analytics'] }"> <div class="w-full max-w-sm"> <label class="block text-[10px] font-black text-slate-400 uppercase tracking-[0.3em] mb-4 ml-2">Active Modules</label> <div class="relative"> <button @click="open = !open" class="w-full min-h-16 bg-white border-2 border-slate-100 rounded-2xl p-4 flex flex-wrap gap-2 items-center text-left focus:outline-none focus:border-indigo-600 transition-all shadow-sm" > <template x-for="item in selected" :key="item"> <span class="inline-flex items-center px-3 py-1 bg-indigo-50 text-indigo-600 rounded-lg text-[10px] font-black uppercase tracking-widest ring-1 ring-indigo-200"> <span x-text="item"></span> <svg @click.stop="selected = selected.filter(i => i !== item)" class="ml-2 h-3 w-3 cursor-pointer hover:text-rose-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z"/></svg> </span> </template> <span x-show="selected.length === 0" class="text-slate-300 font-bold italic text-sm ml-2">Initialize modules...</span> </button> <!-- Dropdown Menu --> <div x-show="open" @click.away="open = false" x-transition class="absolute top-20 left-0 w-full bg-white rounded-2xl shadow-3xl border border-slate-100 p-2 z-10" style="display: none;" > <template x-for="module in ['Security', 'Analytics', 'Database', 'Cloud', 'Network']"> <div @click="selected.includes(module) ? selected = selected.filter(i => i !== module) : selected.push(module)" class="px-4 py-3 rounded-xl flex items-center justify-between cursor-pointer transition-colors" :class="selected.includes(module) ? 'bg-indigo-50 text-indigo-700' : 'hover:bg-slate-50 text-slate-600'" > <span class="text-[10px] font-black uppercase tracking-widest" x-text="module"></span> <svg x-show="selected.includes(module)" class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20"><path d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"/></svg> </div> </template> </div> </div> </div> <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> </body> </html>
