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 Icon 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="{ openItem: 1 }"> <div class="w-full max-w-2xl bg-white rounded-[3rem] shadow-4xl border border-white overflow-hidden p-4"> <div class="space-y-2"> <!-- Item 1 --> <div class="transition-all duration-500 rounded-[2.5rem]" :class="openItem === 1 ? 'bg-indigo-600 text-white' : 'hover:bg-slate-50'" > <button @click="openItem = openItem === 1 ? null : 1" class="w-full px-8 py-7 flex items-center justify-between cursor-pointer text-left" > <div class="flex items-center gap-5"> <div class="h-14 w-14 rounded-2xl flex items-center justify-center transition-colors" :class="openItem === 1 ? 'bg-white/20' : 'bg-slate-100 text-indigo-600'" > <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg> </div> <div> <h3 class="text-lg font-black tracking-tight" :class="openItem === 1 ? 'text-white' : 'text-slate-900'">Energy Metrics</h3> <p class="text-[10px] font-bold uppercase tracking-widest mt-0.5 transition-colors" :class="openItem === 1 ? 'text-indigo-100' : 'text-slate-400'">Sector 7 Output</p> </div> </div> <svg class="h-5 w-5 transition-transform duration-300" :class="openItem === 1 ? 'rotate-180' : 'opacity-40'" 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="openItem === 1" x-collapse style="display: none;"> <div class="px-10 pb-10 ml-16"> <p class="text-sm font-medium leading-relaxed italic" :class="openItem === 1 ? 'text-indigo-50' : 'text-slate-500'">Comprehensive tracking of the spectral energy output across the primary regional backbone. Current efficiency levels are reported at 94.2% with minimal leakage.</p> </div> </div> </div> <!-- Item 2 --> <div class="transition-all duration-500 rounded-[2.5rem]" :class="openItem === 2 ? 'bg-amber-500 text-white' : 'hover:bg-slate-50'" > <button @click="openItem = openItem === 2 ? null : 2" class="w-full px-8 py-7 flex items-center justify-between cursor-pointer text-left" > <div class="flex items-center gap-5"> <div class="h-14 w-14 rounded-2xl flex items-center justify-center transition-colors" :class="openItem === 2 ? 'bg-white/20' : 'bg-slate-100 text-amber-600'" > <svg class="h-6 w-6" 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> <div> <h3 class="text-lg font-black tracking-tight" :class="openItem === 2 ? 'text-white' : 'text-slate-900'">Access History</h3> <p class="text-[10px] font-bold uppercase tracking-widest mt-0.5 transition-colors" :class="openItem === 2 ? 'text-amber-100' : 'text-slate-400'">Registry Logs</p> </div> </div> <svg class="h-5 w-5 transition-transform duration-300" :class="openItem === 2 ? 'rotate-180' : 'opacity-40'" 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="openItem === 2" x-collapse style="display: none;"> <div class="px-10 pb-10 ml-16"> <p class="text-sm font-medium leading-relaxed italic" :class="openItem === 2 ? 'text-amber-50' : 'text-slate-500'">Historical access logs for the primary manifest. All neural entries have been verified and sealed within the decentralized sector bridge.</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>
