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 Animated Accordion</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-indigo-950 flex justify-center min-h-screen pt-16 p-6 antialiased" x-data="{ selection: 1 }"> <div class="w-full max-w-2xl space-y-6"> <!-- Item 1 --> <div class="relative group"> <!-- Gradient Stroke Simulation --> <div class="absolute -inset-[1px] bg-linear-to-r from-indigo-500 via-purple-500 to-rose-500 rounded-[2.5rem] opacity-20 group-hover:opacity-100 transition-opacity duration-500" :class="selection === 1 ? 'opacity-100' : ''"></div> <div class="relative bg-slate-900 rounded-[2.5rem] overflow-hidden"> <button @click="selection = selection === 1 ? null : 1" class="w-full px-10 py-8 flex items-center justify-between cursor-pointer group/btn" > <div class="flex items-center gap-6"> <div class="relative h-12 w-12 flex items-center justify-center"> <div class="absolute inset-0 bg-indigo-500/20 rounded-full animate-pulse" x-show="selection === 1"></div> <div class="h-3 w-3 bg-indigo-500 rounded-full shadow-[0_0_15px_rgba(99,102,241,1)]" :class="selection === 1 ? 'scale-125' : 'scale-100 opacity-40 group-hover/btn:opacity-100 transition-all'"></div> </div> <h3 class="text-xl font-black text-white tracking-tighter italic">Kinetic Synchronization</h3> </div> <div class="relative h-6 w-6"> <div class="absolute top-1/2 left-0 w-full h-0.5 bg-white/20 transition-all duration-500" :class="selection === 1 ? 'rotate-180 bg-white' : ''"></div> <div class="absolute top-0 left-1/2 h-full w-0.5 bg-white/20 transition-all duration-500" :class="selection === 1 ? 'rotate-90 scale-0' : ''"></div> </div> </button> <div x-show="selection === 1" x-collapse x-transition:enter="transition-all duration-500 ease-out" style="display: none;"> <div class="px-10 pb-10 ml-[4.5rem]"> <p class="text-sm font-medium text-slate-400 leading-relaxed italic border-t border-white/5 pt-6">Utilizing high-fidelity kinetic feedback loops to maintain 0ms latency across the primary neural backbone. This deployment level is reserved for premium cluster synchronization.</p> </div> </div> </div> </div> <!-- Item 2 --> <div class="relative group"> <div class="absolute -inset-[1px] bg-linear-to-r from-emerald-500 via-teal-500 to-indigo-500 rounded-[2.5rem] opacity-20 group-hover:opacity-100 transition-opacity duration-500" :class="selection === 2 ? 'opacity-100' : ''"></div> <div class="relative bg-slate-900 rounded-[2.5rem] overflow-hidden"> <button @click="selection = selection === 2 ? null : 2" class="w-full px-10 py-8 flex items-center justify-between cursor-pointer group/btn" > <div class="flex items-center gap-6"> <div class="relative h-12 w-12 flex items-center justify-center"> <div class="absolute inset-0 bg-emerald-500/20 rounded-full animate-pulse" x-show="selection === 2"></div> <div class="h-3 w-3 bg-emerald-500 rounded-full shadow-[0_0_15px_rgba(16,185,129,1)]" :class="selection === 2 ? 'scale-125' : 'scale-100 opacity-40 group-hover/btn:opacity-100 transition-all'"></div> </div> <h3 class="text-xl font-black text-white tracking-tighter italic">Spectral Load Balancing</h3> </div> <div class="relative h-6 w-6"> <div class="absolute top-1/2 left-0 w-full h-0.5 bg-white/20 transition-all duration-500" :class="selection === 2 ? 'rotate-180 bg-white' : ''"></div> <div class="absolute top-0 left-1/2 h-full w-0.5 bg-white/20 transition-all duration-500" :class="selection === 2 ? 'rotate-90 scale-0' : ''"></div> </div> </button> <div x-show="selection === 2" x-collapse x-transition:enter="transition-all duration-500 ease-out" style="display: none;"> <div class="px-10 pb-10 ml-[4.5rem]"> <p class="text-sm font-medium text-slate-400 leading-relaxed italic border-t border-white/5 pt-6">Distributing computational loads across the available spectral bandwidth. Automatic balancing is currently engaged for sector 9 regional manifests.</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>
