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 Maintenance Page</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-gray-50 flex justify-center items-center min-h-screen p-6 antialiased"> <div class="max-w-3xl w-full bg-white p-12 md:p-24 rounded-[5rem] shadow-4xl border border-white text-center space-y-12 relative overflow-hidden"> <!-- Animated Background Motif --> <div class="absolute -top-40 -left-40 h-80 w-80 bg-indigo-50 rounded-full blur-3xl opacity-60"></div> <div class="absolute -bottom-40 -right-40 h-80 w-80 bg-slate-100 rounded-full blur-3xl opacity-60"></div> <div class="relative flex flex-col items-center space-y-8"> <!-- Mechanical Motif --> <div class="relative h-32 w-32 flex items-center justify-center"> <svg class="h-24 w-24 text-slate-200 animate-[spin_10s_linear_infinite]" fill="none" viewBox="0 0 24 24" stroke="currentColor font-light"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /></svg> <div class="absolute inset-0 flex items-center justify-center"> <div class="h-12 w-12 bg-slate-900 border-4 border-white rounded-2xl shadow-xl flex items-center justify-center text-white"> <svg class="h-6 w-6 animate-pulse" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" /></svg> </div> </div> </div> <div class="space-y-4"> <span class="text-[10px] font-black text-indigo-600 uppercase tracking-[0.5em]">System Recalibration</span> <h1 class="text-5xl font-black text-slate-900 tracking-tighter leading-none">Under Reconstruction</h1> <p class="text-slate-500 text-lg leading-relaxed max-w-xl mx-auto font-medium">The Vanguard mesh is currently undergoing sub-cycle kinetic rebalancing. Hub services will resume once spectral integrity is verified.</p> </div> <div class="flex flex-col items-center space-y-6 pt-8 w-full"> <div class="w-full max-w-sm h-2 bg-slate-100 rounded-full overflow-hidden"> <div class="h-full w-[65%] bg-indigo-600 rounded-full animate-pulse"></div> </div> <p class="text-[10px] font-black text-slate-400 uppercase tracking-[0.4em]">Node Sync Progress: 65%</p> </div> <div class="pt-8 flex gap-4"> <a href="#" class="px-8 py-4 bg-slate-900 text-white rounded-2xl text-[10px] font-black uppercase tracking-[0.2em] shadow-2xl shadow-slate-900/40 hover:bg-indigo-600 transition-all">Support Status</a> <a href="#" class="px-8 py-4 bg-slate-50 text-slate-400 border border-slate-100 rounded-2xl text-[10px] font-black uppercase tracking-[0.2em] hover:bg-slate-100 transition-all">Network Map</a> </div> </div> </div> </body> </html>
