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 Expandable Card</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-gray-50 flex items-center justify-center min-h-screen p-6 antialiased" x-data="{ expanded: false }"> <div class="w-full max-w-sm bg-white rounded-[2.5rem] shadow-2xl border border-white overflow-hidden transition-all duration-500" :class="expanded ? 'scale-105' : 'scale-100'"> <div class="p-10"> <div class="flex items-center justify-between mb-6"> <h3 class="text-2xl font-black text-slate-900 tracking-tighter italic">Elastic Data Node.</h3> <button @click="expanded = !expanded" class="h-10 w-10 bg-slate-50 rounded-xl flex items-center justify-center transition-transform duration-500" :class="expanded ? 'rotate-180' : 'rotate-0'"> <svg class="h-6 w-6 text-slate-400" 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> <p class="text-slate-500 font-bold text-sm leading-relaxed italic">Base parameters are currently visible. Click to reveal expanded manifest details.</p> <div x-show="expanded" x-transition:enter="transition ease-out duration-300 transform origin-top opacity-0" x-transition:enter-start="opacity-0 -translate-y-4" x-transition:enter-end="opacity-100 translate-y-0" class="mt-8 pt-8 border-t border-slate-50 space-y-4"> <div class="flex justify-between items-center bg-slate-50 p-4 rounded-2xl"> <span class="text-[9px] font-black text-slate-400 uppercase tracking-widest">Protocol-X</span> <span class="text-[9px] font-black text-indigo-600 uppercase tracking-widest">ENABLED</span> </div> <div class="flex justify-between items-center bg-slate-50 p-4 rounded-2xl"> <span class="text-[9px] font-black text-slate-400 uppercase tracking-widest">Neural Link</span> <span class="text-[8px] font-black underline underline-offset-4 cursor-pointer hover:text-indigo-600">VIEW SOURCE</span> </div> </div> </div> </div> <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> </body> </html>
