Sections
Tailwind CSS Maintenance Pages - Madhuranjan UI
Keep your users informed with our maintenance page designs. Whether it’s a scheduled update, a system reboot, or extended maintenance, each layout is designed to communicate status clearly and effectively.
Maintenance Card
A clean, card-based layout that communicates scheduled maintenance details.
We’ll Be Back Soon!
Our website is currently undergoing scheduled maintenance. We’re working hard to improve our service and will be back online shortly. Thank you for your patience.
Contact Support© 2023 Your Company Name. All rights reserved.
1<div class="flex min-h-screen w-full items-center justify-center overflow-hidden bg-gradient-to-b from-gray-800 to-gray-900 p-6">
2 <div class="bg-opacity-90 max-w-lg rounded-lg bg-gray-900 p-10 text-center shadow-2xl">
3 <!-- Rotating Gear Icon -->
4 <div class="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-gray-800">
5 <svg class="h-12 w-12 animate-spin text-indigo-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
6 <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v.01M12 18v.01M6.343 6.343l.01.01M17.657 17.657l.01.01M6 12h.01M18 12h.01M6.343 17.657l.01-.01M17.657 6.343l.01-.01" />
7 </svg>
8 </div>
9 <!-- Maintenance Message -->
10 <h1 class="mb-4 text-4xl font-extrabold text-white sm:text-5xl">We’ll Be Back Soon!</h1>System Maintenance
A straightforward page to inform users about ongoing system maintenance.
SystemMaintenance
We're performing scheduled maintenance to improve your experience.
Our team is working hard to bring everything back online as soon as possible.
Need immediate assistance? Contact our support team:
1<div class="relative min-h-screen overflow-hidden bg-gradient-to-br from-gray-50 to-white dark:from-gray-900 dark:to-gray-800">
2 <!-- Geometric background pattern -->
3 <div class="absolute inset-0 opacity-10 dark:opacity-20">
4 <svg class="absolute inset-0 h-full w-full" viewBox="0 0 100 100" preserveAspectRatio="none">
5 <path d="M0,0 L100,0 L100,100 L0,100 Z M20,20 L80,20 L80,80 L20,80 Z" fill="none" stroke="currentColor" stroke-width="0.5" class="text-gray-300 dark:text-gray-700"></path>
6 <path d="M30,30 L70,30 L70,70 L30,70 Z" fill="none" stroke="currentColor" stroke-width="0.5" class="text-gray-300 dark:text-gray-700"></path>
7 </svg>
8 </div>
9
10 <!-- Floating tools illustration -->System Reboot
Notify your users about an imminent system reboot with this simple, effective design.
SYSTEMREBOOT IN PROGRESS
> Maintenance_Initiated.exe
> Running system diagnostics...
> Upgrading security protocols [65%]
> Estimated completion: 00:34:27
This scheduled maintenance will enhance performance and security.
All systems will automatically restore when complete.
URGENT ISSUES? CONTACT [email protected]
1<div class="relative min-h-screen overflow-hidden bg-gray-950 text-cyan-100">
2 <!-- Circuit board grid background -->
3 <div class="absolute inset-0 opacity-20">
4 <svg class="absolute inset-0 h-full w-full" viewBox="0 0 100 100" preserveAspectRatio="none">
5 <path d="M0,0 L100,0 L100,100 L0,100 Z M10,10 L90,10 L90,90 L10,90 Z" fill="none" stroke="currentColor" stroke-width="0.3" stroke-dasharray="1,1"></path>
6 <path d="M20,20 L80,20 L80,80 L20,80 Z" fill="none" stroke="currentColor" stroke-width="0.3" stroke-dasharray="1,1"></path>
7 <line x1="0" y1="50" x2="100" y2="50" stroke="currentColor" stroke-width="0.2" stroke-dasharray="1,1"></line>
8 <line x1="50" y1="0" x2="50" y2="100" stroke="currentColor" stroke-width="0.2" stroke-dasharray="1,1"></line>
9 </svg>
10 </div>Advanced System Maintenance
A comprehensive layout that provides detailed updates during extended maintenance periods.
System Maintenance
In Progress
Scheduled Infrastructure Upgrade
We're currently performing critical maintenance to improve performance and reliability. Our systems will be back online shortly.
Performance Boost
Upgrading servers for 3x faster response times and smoother user experience.
Enhanced Security
Implementing new security protocols to better protect your data.
Need immediate assistance?
Contact Support© 2023 Your Company. All rights reserved.
1<div class="relative min-h-screen overflow-hidden bg-gray-950 text-gray-100">
2 <!-- Circuit board background pattern -->
3 <div class="absolute inset-0 opacity-10">
4 <svg class="h-full w-full" viewBox="0 0 100 100" preserveAspectRatio="none">
5 <path d="M0,0 L100,0 L100,100 L0,100 Z" fill="none" stroke="currentColor" stroke-width="0.5" stroke-dasharray="1 2"></path>
6 <path d="M50,0 L50,100 M0,50 L100,50" stroke="currentColor" stroke-width="0.3"></path>
7 <circle cx="20" cy="20" r="1" fill="currentColor"></circle>
8 <circle cx="80" cy="20" r="1" fill="currentColor"></circle>
9 <circle cx="20" cy="80" r="1" fill="currentColor"></circle>
10 <circle cx="80" cy="80" r="1" fill="currentColor"></circle>Quantum Maintenance
A futuristic design that leverages innovative visuals to communicate maintenance status.
QuantumMaintenance
We're performing quantum-level optimizations to deliver unparalleled performance.
QUANTUM ENTANGLEMENT REQUIRED? [email protected]
1<div class="relative min-h-screen overflow-hidden bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-gray-900 via-gray-950 to-black text-white dark:bg-black dark:text-white">
2 <!-- Quantum particle background -->
3 <div class="absolute inset-0 opacity-30">
4 <div class="absolute h-full w-full [mask-image:radial-gradient(ellipse_at_center,transparent_30%,black)]">
5 <svg class="absolute inset-0 h-full w-full" aria-hidden="true">
6 <defs>
7 <pattern id="quantum-dots" width="40" height="40" patternUnits="userSpaceOnUse">
8 <circle cx="20" cy="20" r="0.5" fill="currentColor" class="text-indigo-500/50"></circle>
9 <circle cx="40" cy="20" r="0.8" fill="currentColor" class="text-blue-400/40"></circle>
10 <circle cx="20" cy="40" r="0.6" fill="currentColor" class="text-purple-500/60"></circle>