Tailwind CSS Maintenance Page

Default maintenance page

Use this example to let your users know that your site is currently under maintenance using heading, countdown, illustration and notification form.
Preview
Code
Figma File
                                                <section class="py-24 relative">
        <div class="w-full max-w-7xl px-4 md:px-5 lg:px-5 mx-auto">
            <div class="w-full flex-col justify-center items-center lg:gap-14 gap-10 inline-flex">
                <a href="">
                  <svg xmlns="http://www.w3.org/2000/svg" width="170" height="44" viewBox="0 0 170 44" fill="none">
                    <path d="M49.5 30.7231V13H56.9171C57.0916 13 57.316 13.0082 57.5903 13.0246C57.8645 13.0328 58.118 13.0574 58.3507 13.0985C59.3895 13.2544 60.2455 13.5949 60.9186 14.12C61.6001 14.6451 62.1029 15.3097 62.427 16.1138C62.7594 16.9097 62.9256 17.7959 62.9256 18.7723C62.9256 19.7405 62.7594 20.6267 62.427 21.4308C62.0945 22.2267 61.5876 22.8872 60.9061 23.4123C60.233 23.9374 59.3812 24.2779 58.3507 24.4338C58.118 24.4667 57.8604 24.4913 57.5778 24.5077C57.3035 24.5241 57.0833 24.5323 56.9171 24.5323H52.5042V30.7231H49.5ZM52.5042 21.7631H56.7925C56.9587 21.7631 57.1457 21.7549 57.3534 21.7385C57.5612 21.7221 57.7523 21.6892 57.9268 21.64C58.4255 21.5169 58.8161 21.2995 59.0986 20.9877C59.3895 20.6759 59.5931 20.3231 59.7094 19.9292C59.8341 19.5354 59.8964 19.1497 59.8964 18.7723C59.8964 18.3949 59.8341 18.0092 59.7094 17.6154C59.5931 17.2133 59.3895 16.8564 59.0986 16.5446C58.8161 16.2328 58.4255 16.0154 57.9268 15.8923C57.7523 15.8431 57.5612 15.8144 57.3534 15.8062C57.1457 15.7897 56.9587 15.7815 56.7925 15.7815H52.5042V21.7631Z" fill="#4338CA"/>
                    <path d="M68.5975 31.0923C67.6252 31.0923 66.8024 30.9118 66.1293 30.5508C65.4561 30.1815 64.945 29.6933 64.596 29.0862C64.2553 28.479 64.0849 27.8103 64.0849 27.08C64.0849 26.44 64.1929 25.8656 64.409 25.3569C64.6251 24.84 64.9575 24.3969 65.4063 24.0277C65.855 23.6503 66.4368 23.3426 67.1515 23.1046C67.6917 22.9323 68.3233 22.7764 69.0463 22.6369C69.7776 22.4974 70.5671 22.3703 71.4148 22.2554C72.2707 22.1323 73.1641 22.001 74.0949 21.8615L73.0228 22.4646C73.0311 21.5456 72.8234 20.8687 72.3995 20.4338C71.9757 19.999 71.261 19.7815 70.2554 19.7815C69.6488 19.7815 69.0629 19.921 68.4978 20.2C67.9327 20.479 67.5379 20.959 67.3135 21.64L64.5711 20.7908C64.9035 19.6667 65.5351 18.7641 66.4659 18.0831C67.4049 17.4021 68.6681 17.0615 70.2554 17.0615C71.4522 17.0615 72.5034 17.2544 73.4093 17.64C74.3234 18.0256 75.0007 18.6574 75.4412 19.5354C75.6822 20.0031 75.8276 20.4831 75.8775 20.9754C75.9274 21.4595 75.9523 21.9887 75.9523 22.5631V30.7231H73.322V27.8431L73.7583 28.3108C73.1517 29.2708 72.4411 29.9764 71.6267 30.4277C70.8206 30.8708 69.8108 31.0923 68.5975 31.0923ZM69.1959 28.7292C69.8773 28.7292 70.4591 28.6103 70.9411 28.3723C71.4231 28.1344 71.8054 27.8431 72.0879 27.4985C72.3788 27.1538 72.5741 26.8297 72.6738 26.5262C72.8317 26.1487 72.919 25.7179 72.9356 25.2338C72.9605 24.7415 72.973 24.3436 72.973 24.04L73.8954 24.3108C72.9896 24.4503 72.2126 24.5733 71.5643 24.68C70.9161 24.7867 70.3593 24.8892 69.8939 24.9877C69.4286 25.0779 69.0172 25.1805 68.6598 25.2954C68.3108 25.4185 68.0158 25.5621 67.7748 25.7262C67.5338 25.8903 67.3468 26.079 67.2138 26.2923C67.0891 26.5056 67.0268 26.7559 67.0268 27.0431C67.0268 27.3713 67.1099 27.6626 67.2761 27.9169C67.4423 28.1631 67.6833 28.36 67.9991 28.5077C68.3233 28.6554 68.7222 28.7292 69.1959 28.7292Z" fill="#4338CA"/>
                    <path d="M84.6078 37C83.8598 37 83.141 36.8851 82.4512 36.6554C81.7698 36.4256 81.1548 36.0933 80.6063 35.6585C80.0578 35.2318 79.609 34.7149 79.26 34.1077L82.0274 32.7538C82.285 33.2379 82.6465 33.5949 83.1119 33.8246C83.5856 34.0626 84.0884 34.1815 84.6203 34.1815C85.2435 34.1815 85.8003 34.0708 86.2907 33.8492C86.781 33.6359 87.1591 33.3159 87.425 32.8892C87.6993 32.4708 87.8281 31.9456 87.8115 31.3138V27.5354H88.1855V17.4308H90.8157V31.3631C90.8157 31.6995 90.7991 32.0195 90.7659 32.3231C90.7409 32.6349 90.6952 32.9385 90.6287 33.2338C90.4293 34.0954 90.047 34.801 89.4819 35.3508C88.9168 35.9087 88.2145 36.3231 87.3752 36.5938C86.5441 36.8646 85.6217 37 84.6078 37ZM84.346 31.0923C83.1077 31.0923 82.0274 30.7846 81.1049 30.1692C80.1825 29.5538 79.4678 28.7169 78.9608 27.6585C78.4539 26.6 78.2004 25.4062 78.2004 24.0769C78.2004 22.7313 78.4539 21.5333 78.9608 20.4831C79.4761 19.4246 80.2032 18.5918 81.1423 17.9846C82.0814 17.3692 83.1867 17.0615 84.4582 17.0615C85.738 17.0615 86.8101 17.3692 87.6744 17.9846C88.547 18.5918 89.2076 19.4246 89.6564 20.4831C90.1052 21.5415 90.3296 22.7395 90.3296 24.0769C90.3296 25.3979 90.1052 26.5918 89.6564 27.6585C89.2076 28.7169 88.5387 29.5538 87.6494 30.1692C86.7602 30.7846 85.6591 31.0923 84.346 31.0923ZM84.8072 28.4338C85.6134 28.4338 86.2616 28.2533 86.7519 27.8923C87.2505 27.5231 87.612 27.0103 87.8364 26.3538C88.0691 25.6974 88.1855 24.9385 88.1855 24.0769C88.1855 23.2072 88.0691 22.4482 87.8364 21.8C87.612 21.1436 87.2588 20.6349 86.7768 20.2738C86.2948 19.9046 85.6715 19.72 84.907 19.72C84.1008 19.72 83.436 19.9169 82.9124 20.3108C82.3889 20.6964 82.0024 21.2215 81.7531 21.8862C81.5038 22.5426 81.3792 23.2728 81.3792 24.0769C81.3792 24.8892 81.4997 25.6277 81.7407 26.2923C81.99 26.9487 82.3681 27.4697 82.875 27.8554C83.382 28.241 84.0261 28.4338 84.8072 28.4338Z" fill="#4338CA"/>
                    <path d="M100.183 31.0923C98.8198 31.0923 97.6231 30.801 96.5926 30.2185C95.5621 29.6359 94.756 28.8277 94.1743 27.7938C93.6008 26.76 93.3141 25.5703 93.3141 24.2246C93.3141 22.7723 93.5967 21.5128 94.1618 20.4462C94.7269 19.3713 95.5122 18.5385 96.5178 17.9477C97.5234 17.3569 98.6869 17.0615 100.008 17.0615C101.404 17.0615 102.589 17.3856 103.561 18.0338C104.542 18.6738 105.269 19.5805 105.742 20.7538C106.216 21.9272 106.395 23.3097 106.278 24.9015H103.299V23.8185C103.291 22.3744 103.033 21.32 102.526 20.6554C102.019 19.9908 101.222 19.6585 100.133 19.6585C98.9029 19.6585 97.9888 20.0359 97.3904 20.7908C96.7921 21.5374 96.4929 22.6328 96.4929 24.0769C96.4929 25.4226 96.7921 26.4646 97.3904 27.2031C97.9888 27.9415 98.8614 28.3108 100.008 28.3108C100.748 28.3108 101.384 28.1508 101.915 27.8308C102.456 27.5026 102.871 27.0308 103.162 26.4154L106.129 27.3015C105.614 28.4995 104.816 29.4308 103.735 30.0954C102.663 30.76 101.479 31.0923 100.183 31.0923ZM95.5455 24.9015V22.6615H104.808V24.9015H95.5455Z" fill="#4338CA"/>
                    <path d="M114.208 31.0923C112.97 31.0923 111.89 30.7846 110.967 30.1692C110.045 29.5538 109.33 28.7169 108.823 27.6585C108.316 26.6 108.063 25.4062 108.063 24.0769C108.063 22.7313 108.316 21.5333 108.823 20.4831C109.338 19.4246 110.065 18.5918 111.005 17.9846C111.944 17.3692 113.049 17.0615 114.32 17.0615C115.6 17.0615 116.672 17.3692 117.537 17.9846C118.409 18.5918 119.07 19.4246 119.519 20.4831C119.967 21.5415 120.192 22.7395 120.192 24.0769C120.192 25.3979 119.967 26.5918 119.519 27.6585C119.07 28.7169 118.401 29.5538 117.512 30.1692C116.622 30.7846 115.521 31.0923 114.208 31.0923ZM114.669 28.4338C115.476 28.4338 116.124 28.2533 116.614 27.8923C117.113 27.5231 117.474 27.0103 117.699 26.3538C117.931 25.6974 118.048 24.9385 118.048 24.0769C118.048 23.2072 117.931 22.4482 117.699 21.8C117.474 21.1436 117.121 20.6349 116.639 20.2738C116.157 19.9046 115.534 19.72 114.769 19.72C113.963 19.72 113.298 19.9169 112.775 20.3108C112.251 20.6964 111.865 21.2215 111.615 21.8862C111.366 22.5426 111.241 23.2728 111.241 24.0769C111.241 24.8892 111.362 25.6277 111.603 26.2923C111.852 26.9487 112.23 27.4697 112.737 27.8554C113.244 28.241 113.888 28.4338 114.669 28.4338ZM118.048 30.7231V21.3938H117.674V13H120.703V30.7231H118.048Z" fill="#4338CA"/>
                    <path d="M129.895 31.0923C128.549 31.0923 127.373 30.7928 126.367 30.1938C125.361 29.5949 124.58 28.7703 124.023 27.72C123.475 26.6615 123.201 25.4472 123.201 24.0769C123.201 22.6821 123.483 21.4595 124.048 20.4092C124.613 19.359 125.399 18.5385 126.404 17.9477C127.41 17.3569 128.573 17.0615 129.895 17.0615C131.249 17.0615 132.43 17.361 133.435 17.96C134.441 18.559 135.222 19.3877 135.779 20.4462C136.335 21.4964 136.614 22.7067 136.614 24.0769C136.614 25.4554 136.331 26.6738 135.766 27.7323C135.209 28.7826 134.428 29.6072 133.423 30.2062C132.417 30.7969 131.241 31.0923 129.895 31.0923ZM129.895 28.3108C131.092 28.3108 131.981 27.9169 132.562 27.1292C133.144 26.3415 133.435 25.3241 133.435 24.0769C133.435 22.7887 133.14 21.7631 132.55 21C131.96 20.2287 131.075 19.8431 129.895 19.8431C129.089 19.8431 128.424 20.0236 127.9 20.3846C127.385 20.7374 127.003 21.2338 126.753 21.8738C126.504 22.5056 126.379 23.24 126.379 24.0769C126.379 25.3651 126.674 26.3949 127.265 27.1662C127.863 27.9292 128.74 28.3108 129.895 28.3108Z" fill="#4338CA"/>
                    <path d="M148.423 30.7231V24.3231C148.423 23.9046 148.394 23.441 148.336 22.9323C148.278 22.4236 148.14 21.9354 147.924 21.4677C147.717 20.9918 147.401 20.6021 146.977 20.2985C146.561 19.9949 145.996 19.8431 145.282 19.8431C144.899 19.8431 144.521 19.9046 144.147 20.0277C143.773 20.1508 143.433 20.3641 143.125 20.6677C142.826 20.9631 142.585 21.3733 142.402 21.8985C142.219 22.4154 142.128 23.08 142.128 23.8923L140.345 23.1415C140.345 22.0092 140.565 20.9836 141.006 20.0646C141.455 19.1456 142.111 18.4154 142.975 17.8738C143.84 17.3241 144.903 17.0492 146.167 17.0492C147.164 17.0492 147.987 17.2133 148.635 17.5415C149.283 17.8697 149.798 18.2882 150.181 18.7969C150.563 19.3056 150.845 19.8472 151.028 20.4215C151.211 20.9959 151.327 21.5415 151.377 22.0585C151.436 22.5672 151.465 22.9815 151.465 23.3015V30.7231H148.423ZM139.086 30.7231V17.4308H141.766V21.5538H142.128V30.7231H139.086Z" fill="#4338CA"/>
                    <path d="M160.37 31.0923C159.007 31.0923 157.81 30.801 156.78 30.2185C155.749 29.6359 154.943 28.8277 154.361 27.7938C153.788 26.76 153.501 25.5703 153.501 24.2246C153.501 22.7723 153.784 21.5128 154.349 20.4462C154.914 19.3713 155.699 18.5385 156.705 17.9477C157.71 17.3569 158.874 17.0615 160.195 17.0615C161.591 17.0615 162.776 17.3856 163.748 18.0338C164.729 18.6738 165.456 19.5805 165.93 20.7538C166.403 21.9272 166.582 23.3097 166.466 24.9015H163.486V23.8185C163.478 22.3744 163.22 21.32 162.713 20.6554C162.206 19.9908 161.409 19.6585 160.32 19.6585C159.09 19.6585 158.176 20.0359 157.578 20.7908C156.979 21.5374 156.68 22.6328 156.68 24.0769C156.68 25.4226 156.979 26.4646 157.578 27.2031C158.176 27.9415 159.048 28.3108 160.195 28.3108C160.935 28.3108 161.571 28.1508 162.103 27.8308C162.643 27.5026 163.058 27.0308 163.349 26.4154L166.316 27.3015C165.801 28.4995 165.003 29.4308 163.923 30.0954C162.851 30.76 161.666 31.0923 160.37 31.0923ZM155.733 24.9015V22.6615H164.995V24.9015H155.733Z" fill="#4338CA"/>
                    <path d="M27.0473 17.8941C27.6905 18.5063 27.7068 19.5149 27.0837 20.1468L21.2585 26.054C20.6354 26.686 19.6087 26.702 18.9654 26.0898C18.3222 25.4776 18.3059 24.469 18.929 23.8371L24.7542 17.9299C25.3773 17.2979 26.404 17.2819 27.0473 17.8941Z" fill="#4338CA"/>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 10.5467C2.5 8.03564 4.57211 6 7.12819 6H24.0399V6.00124C31.4908 6.09985 37.5 12.0643 37.5 19.4075C37.5 26.8123 31.3897 32.8151 23.8523 32.8151C21.1648 32.8151 18.6587 32.052 16.5463 30.7342L9.08815 37.9057C6.63431 40.2652 2.5 38.5573 2.5 35.1841V10.5467ZM14.0194 28.7055C11.6571 26.295 10.2045 23.0179 10.2045 19.4075C10.2045 18.5277 10.9306 17.8144 11.8262 17.8144C12.7218 17.8144 13.4479 18.5277 13.4479 19.4075C13.4479 25.0526 18.1061 29.6288 23.8523 29.6288C29.5985 29.6288 34.2567 25.0526 34.2567 19.4075C34.2567 13.7625 29.5985 9.18626 23.8523 9.18626H7.12819C6.36336 9.18626 5.74334 9.79536 5.74334 10.5467V35.1841C5.74334 35.7351 6.41866 36.014 6.81948 35.6286L14.0194 28.7055Z" fill="#4338CA"/>
                  </svg>
                </a>
                <div class="w-full flex-col justify-center items-center gap-5 flex">
                    <div class="w-full flex-col justify-center items-center gap-6 flex">
                        <div class="w-full flex-col justify-start items-center gap-2.5 flex">
                            <h2 class="text-center text-gray-800 text-3xl font-bold font-manrope leading-normal">Please bear with us! We're currently under maintenance.</h2>
                            <p class="text-center text-gray-500 text-base font-normal leading-relaxed">It's going to take some time to fix the error. We'll be back online in.</p>
                        </div>
                        <div class="flex items-start justify-center w-full gap-1 count-down-main">
                            <div class="timer">
                              <div class="">
                                <h3 class="countdown-element days text-center text-black text-3xl font-normal font-manrope leading-normal"></h3>
                              </div>
                            </div>
                            <h3 class="text-center text-black text-3xl font-normal font-manrope leading-normal">:</h3>
                            <div class="timer">
                              <div class="">
                                <h3 class="countdown-element hours text-center text-black text-3xl font-normal font-manrope leading-normal"></h3>
                              </div>
                            </div>
                            <h3 class="text-center text-black text-3xl font-normal font-manrope leading-normal">:</h3>
                            <div class="timer">
                              <div class="">
                                <h3 class="countdown-element minutes text-center text-black text-3xl font-normal font-manrope leading-normal"></h3>
                              </div>
                            </div>
                            <h3 class="text-center text-black text-3xl font-normal font-manrope leading-normal">:</h3>
                            <div class="timer">
                              <div class="">
                                <h3 class="countdown-element seconds text-center text-black text-3xl font-normal font-manrope leading-normal"></h3>
                              </div>
                            </div>
                          </div>
                        <div class="w-full justify-center items-center gap-2.5 flex sm:flex-row flex-col">
                            <input type="text" class="sm:w-80 w-full h-10 focus:outline-none text-gray-900 placeholder-gray-400 text-sm font-normal leading-relaxed px-3.5 py-2 rounded-lg shadow-[0px_1px_2px_0px_rgba(16,_24,_40,_0.05)] border border-gray-300" placeholder="Your mail">
                            <button class="sm:w-fit w-full px-3.5 py-2 bg-indigo-700 hover:bg-indigo-800 transition-all duration-700 ease-in-out rounded-lg shadow-[0px_1px_2px_0px_rgba(16,_24,_40,_0.05)] justify-center items-center flex">
                                <span class="px-1.5 text-white text-sm font-medium leading-6 whitespace-nowrap">Notify Me</span>
                            </button>
                        </div>
                    </div>
                    <img src="https://pagedone.io/asset/uploads/1718004199.png" alt="under maintenance image">
                </div>
            </div>
        </div>
    </section>
<!--Custom Script-->
<script>
    // count-down timer
    let dest = new Date("mar 31, 2024 23:59:59").getTime();
    let x = setInterval(function () {
      let now = new Date().getTime();
      let diff = dest - now;
      // Check if the countdown has reached zero or negative
      if (diff <= 0) {
        // Set the destination date to the same day next month
        let nextMonthDate = new Date();
        nextMonthDate.setMonth(nextMonthDate.getMonth() + 1);

        // If the current month is December, set the destination date to the same day next year
        if (nextMonthDate.getMonth() === 0) {
          nextMonthDate.setFullYear(nextMonthDate.getFullYear() + 1);
        }

        dest = nextMonthDate.getTime();
        return; // Exit the function
      }

      let days = Math.floor(diff / (1000 * 60 * 60 * 24));
      let hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      let minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
      let seconds = Math.floor((diff % (1000 * 60)) / 1000);

      if (days < 10) {
        days = `0${days}`;
      }

      if (hours < 10) {
        hours = `0${hours}`;
      }
      if (minutes < 10) {
        minutes = `0${minutes}`;
      }
      if (seconds < 10) {
        seconds = `0${seconds}`;
      }

      // Get elements by class name
      let countdownElements = document.getElementsByClassName("countdown-element");

      // Loop through the elements and update their content
      for (let i = 0; i < countdownElements.length; i++) {
        let className = countdownElements[i].classList[1]; // Get the second class name
        switch (className) {
          case "days":
            countdownElements[i].innerHTML = days;
            break;
          case "hours":
            countdownElements[i].innerHTML = hours;
            break;
          case "minutes":
            countdownElements[i].innerHTML = minutes;
            break;
          case "seconds":
            countdownElements[i].innerHTML = seconds;
            break;
          default:
            break;
        }
      }
    }, 10);
</script>
HTML Copy
Maintenance page with logo

Use this example to show your logo alongside the maintenance notice heading, paragraph and illustration.
Preview
Code
Figma File
Maintenance page with countdown

This tailwind css maintenance example can be used to show countdown, heading, paragraph and email input togather.
Preview
Code
Figma File
Maintenance page with social links

Below example can be used to show under maintenance heading, paragraph and social media links.
Preview
Code
Figma File
Tailwind maintenance page with illustration

Use this example to show creative illustration on under maintenance page alongside heading and paragraph.
Preview
Code
Figma File
Splitted under maintenance page

Use this example to also show a visually impactful illustration when notifying your users that your website is being updated with social links.
Preview
Code
Figma File