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 Error State</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-rose-50/30 flex justify-center items-center min-h-screen p-6 antialiased"> <div class="max-w-xl w-full bg-white p-12 rounded-[4rem] shadow-4xl border border-rose-100 relative overflow-hidden group"> <!-- Background Signal --> <div class="absolute -top-10 -right-10 h-40 w-40 bg-rose-50 rounded-full blur-3xl group-hover:bg-rose-100 transition-colors"></div> <div class="relative flex flex-col items-center text-center space-y-8"> <div class="h-20 w-20 bg-rose-500 rounded-3xl flex items-center justify-center text-white shadow-2xl shadow-rose-500/40 animate-pulse"> <svg class="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg> </div> <div class="space-y-3"> <span class="text-[10px] font-black text-rose-600 uppercase tracking-[0.4em]">Protocol Hazard</span> <h2 class="text-3xl font-black text-slate-900 tracking-tight leading-none">Manifest Corruption</h2> <p class="text-slate-500 leading-relaxed font-medium">The handshake sequence encountered a fatal anomaly in the spectral layer. Cluster synchronization has been halted.</p> </div> <div class="w-full bg-rose-50 p-6 rounded-2xl border border-rose-100 text-left"> <div class="flex items-center gap-3 mb-2"> <div class="h-2 w-2 bg-rose-600 rounded-full"></div> <span class="text-[9px] font-black text-rose-600 uppercase tracking-widest leading-none">Debug Log</span> </div> <code class="text-[11px] font-mono text-rose-800 break-all">ERR_CORE_HANDSHAKE_TIMEOUT: Apex Node US-East-01 rejected credentials.</code> </div> <div class="flex gap-4 w-full"> <button class="flex-1 py-4 bg-slate-900 text-white rounded-2xl text-[10px] font-black uppercase tracking-widest hover:bg-rose-600 transition-all cursor-pointer">Retry Handshake</button> <button class="flex-1 py-4 bg-white text-slate-900 border border-slate-200 rounded-2xl text-[10px] font-black uppercase tracking-widest hover:bg-slate-50 transition-all cursor-pointer">Abort Session</button> </div> </div> </div> </body> </html>
