In this section we will create maintenance page in tailwind css. we will see, 503 maintenance page, responsive under construction page with image, coming back soon page example with Tailwind CSS 3.
Example 1
tailwind css simple 503 maintenance page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tailwind CSS 503 Maintenance Page Example</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="flex items-center justify-center h-screen">
<div class="flex flex-col items-center justify-center max-w-lg">
<div class="mb-4">
<h1 class="text-5xl font-extrabold text-blue-600">503</h1>
</div>
<h3 class="mb-3 text-2xl font-bold text-center text-gray-700">
Temporarily down for maintenance
We’ll be back soon!
</h3>
<p class="text-sm text-center text-gray-600">
Sorry for the inconvenience but we’re performing some maintenance at the moment.
If you need to you can always <a class="text-blue-600 hover:underline">Contact us </a>, otherwise
we’ll be back online shortly!
— The Team
</p>
</div>
</div>
</body>
</html>
tailwind css 503 website down maintenance page
Example 2
tailwind css responsive under maintenance page with image.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tailwind CSS Responsive Maintenance Page with image</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="flex items-center justify-center h-screen">
<div class="flex flex-col items-center justify-center max-w-2xl">
<img src="https://cdn.pixabay.com/photo/2017/06/20/08/12/maintenance-2422173__340.png"
alt="tailwindcss maintenance">
<h1 class="mb-3 text-3xl font-bold text-center text-purple-600">Under Maintenance</h1>
<p class="text-center text-gray-600">The Page you are looking for is currently under maintenance and will be
back soon.</p>
</div>
</div>
</body>
</html>
tailwind css maintenance page with image
Example 3
tailwind css maintenance soon page with Heroicons Icon.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tailwind CSS Maintenance Page with Heroicons icon</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="flex items-center justify-center h-screen bg-purple-600">
<div class="flex flex-col items-center justify-center max-w-2xl">
<div>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-20 h-20 text-yellow-400">
<path stroke-linecap="round" stroke-linejoin="round"
d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
</svg>
</div>
<h1 class="mb-3 text-3xl font-bold text-center text-purple-100">We’ll be back soon!</h1>
<p class="text-center text-gray-100">
Sorry for the inconvenience. We’re performing some maintenance at the moment.
we’ll be back up shortly!
</p>
</div>
</div>
</body>
</html>
tailwind css coming soon page
