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 Nested 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="{ mainActive: 1, subActive: null }"> <div class="w-full max-w-2xl bg-white border border-slate-100 rounded-[3rem] shadow-3xl overflow-hidden"> <!-- Main Item 1 --> <div class="border-b border-slate-50 last:border-0"> <button @click="mainActive = mainActive === 1 ? null : 1" class="w-full px-10 py-8 flex items-center justify-between cursor-pointer group" > <div class="flex items-center gap-4"> <div class="h-10 w-10 bg-indigo-50 text-indigo-600 rounded-xl flex items-center justify-center transition-all group-hover:bg-indigo-600 group-hover:text-white" :class="mainActive === 1 ? 'bg-indigo-600 text-white' : ''"> <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 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" /></svg> </div> <h3 class="text-xl font-black text-slate-800 tracking-tighter italic">Sector 4 Hierarchy</h3> </div> <svg class="h-5 w-5 text-slate-300 transition-transform duration-300" :class="mainActive === 1 ? 'rotate-180' : ''" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M19 9l-7 7-7-7" /></svg> </button> <div x-show="mainActive === 1" x-collapse style="display: none;"> <div class="px-10 pb-10 space-y-3"> <!-- Nested Item 1 --> <div class="rounded-2xl border border-slate-100 overflow-hidden"> <button @click="subActive = subActive === 1.1 ? null : 1.1" class="w-full px-6 py-4 flex items-center justify-between bg-slate-50/50 hover:bg-slate-100/50 transition-colors cursor-pointer" > <div class="flex items-center gap-3 text-slate-600"> <div class="h-1.5 w-1.5 bg-indigo-500 rounded-full animate-pulse" x-show="subActive === 1.1"></div> <span class="text-xs font-black uppercase tracking-widest italic">Core Nodes</span> </div> <svg class="h-4 w-4 text-slate-400" :class="subActive === 1.1 ? 'rotate-180' : ''" 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> <div x-show="subActive === 1.1" x-collapse style="display: none;"> <div class="p-6 text-sm text-slate-500 font-medium leading-relaxed italic pr-12"> Displaying active neural cores in the primary cluster. Standard verification is currently engaged for all 12 units. </div> </div> </div> <!-- Nested Item 2 --> <div class="rounded-2xl border border-slate-100 overflow-hidden"> <button @click="subActive = subActive === 1.2 ? null : 1.2" class="w-full px-6 py-4 flex items-center justify-between bg-slate-50/50 hover:bg-slate-100/50 transition-colors cursor-pointer" > <div class="flex items-center gap-3 text-slate-600"> <div class="h-1.5 w-1.5 bg-indigo-500 rounded-full animate-pulse" x-show="subActive === 1.2"></div> <span class="text-xs font-black uppercase tracking-widest italic">Peripheral Segments</span> </div> <svg class="h-4 w-4 text-slate-400" :class="subActive === 1.2 ? 'rotate-180' : ''" 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> <div x-show="subActive === 1.2" x-collapse style="display: none;"> <div class="p-6 text-sm text-slate-500 font-medium leading-relaxed italic pr-12"> Monitoring auxiliary segments connected via the regional bridge. No anomalies detected in current cycle. </div> </div> </div> </div> </div> </div> <!-- Main Item 2 --> <div class="border-b border-slate-50 last:border-0"> <button @click="mainActive = mainActive === 2 ? null : 2" class="w-full px-10 py-8 flex items-center justify-between cursor-pointer group" > <div class="flex items-center gap-4"> <div class="h-10 w-10 bg-slate-50 text-slate-400 rounded-xl flex items-center justify-center transition-all group-hover:bg-indigo-600 group-hover:text-white" :class="mainActive === 2 ? 'bg-indigo-600 text-white' : ''"> <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="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" /></svg> </div> <h3 class="text-xl font-black text-slate-800 tracking-tighter italic">Security Protocols</h3> </div> <svg class="h-5 w-5 text-slate-300 transition-transform duration-300" :class="mainActive === 2 ? 'rotate-180' : ''" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M19 9l-7 7-7-7" /></svg> </button> <div x-show="mainActive === 2" x-collapse style="display: none;"> <div class="px-10 pb-10"> <p class="text-sm font-medium text-slate-500 italic">Advanced encryption tiers and manifest sealing mechanisms. Restricted access reserved for Alpha identifiers.</p> </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>
