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 Accordion</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-16 p-6 antialiased" x-data="{ activeAccordion: 1 }"> <div class="w-full max-w-2xl space-y-4"> <!-- Item 1 --> <div class="bg-white border border-slate-100 rounded-[2rem] shadow-sm overflow-hidden transition-all duration-300" :class="activeAccordion === 1 ? 'shadow-2xl shadow-slate-200 border-indigo-100' : 'hover:border-slate-200'"> <button @click="activeAccordion = activeAccordion === 1 ? null : 1" class="w-full px-8 py-6 flex items-center justify-between cursor-pointer group" > <div class="flex flex-col items-start gap-1"> <span class="text-xs font-black text-slate-400 uppercase tracking-widest italic">Node Cluster Alpha</span> <h3 class="text-lg font-black text-slate-800 tracking-tight transition-colors" :class="activeAccordion === 1 ? 'text-indigo-600' : 'group-hover:text-slate-900'">Main Core Configuration</h3> </div> <div class="h-10 w-10 bg-slate-50 rounded-xl flex items-center justify-center transition-all duration-300" :class="activeAccordion === 1 ? 'bg-indigo-600 text-white rotate-180 shadow-lg shadow-indigo-100' : 'text-slate-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.5" d="M19 9l-7 7-7-7" /></svg> </div> </button> <div x-show="activeAccordion === 1" x-collapse style="display: none;" > <div class="px-8 pb-8 pt-2"> <div class="p-6 bg-slate-50/50 rounded-2xl border border-slate-100/50"> <p class="text-sm font-medium text-slate-500 leading-relaxed italic">The primary neural cluster established in sector 4. Synchronization status is verified at 100%. Distribution protocols are currently broadcasting across all edge nodes.</p> </div> </div> </div> </div> <!-- Item 2 --> <div class="bg-white border border-slate-100 rounded-[2rem] shadow-sm overflow-hidden transition-all duration-300" :class="activeAccordion === 2 ? 'shadow-2xl shadow-slate-200 border-indigo-100' : 'hover:border-slate-200'"> <button @click="activeAccordion = activeAccordion === 2 ? null : 2" class="w-full px-8 py-6 flex items-center justify-between cursor-pointer group" > <div class="flex flex-col items-start gap-1"> <span class="text-xs font-black text-slate-400 uppercase tracking-widest italic">Mesh Operations</span> <h3 class="text-lg font-black text-slate-800 tracking-tight transition-colors" :class="activeAccordion === 2 ? 'text-indigo-600' : 'group-hover:text-slate-900'">Regional Bridge Analytics</h3> </div> <div class="h-10 w-10 bg-slate-50 rounded-xl flex items-center justify-center transition-all duration-300" :class="activeAccordion === 2 ? 'bg-indigo-600 text-white rotate-180 shadow-lg shadow-indigo-100' : 'text-slate-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.5" d="M19 9l-7 7-7-7" /></svg> </div> </button> <div x-show="activeAccordion === 2" x-collapse style="display: none;" > <div class="px-8 pb-8 pt-2"> <div class="p-6 bg-slate-50/50 rounded-2xl border border-slate-100/50"> <p class="text-sm font-medium text-slate-500 leading-relaxed italic">Inter-region connectivity metrics. Latency is being maintained at submodule levels across both the Atlantic and Pacific hubs. Periodic audits recommended.</p> </div> </div> </div> </div> </div> <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.x.x/dist/cdn.min.js"></script> <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> </body> </html>
