Basic Coming Soon page

This example of the Tailwind Coming Soon page can be used in dark mode. It shows a countdown timer and a call-to-action form where users could enter an email to sign up for the waitlist.
Preview
Code
Figma File
                                        <body class="font-inter">
    <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 md:px-16 px-10 md:pt-16 pt-10 pb-10 bg-gray-900 rounded-2xl flex-col justify-end items-center lg:gap-28 md:gap-16 gap-10 inline-flex"
        >
          <div class="flex-col justify-end items-center lg:gap-16 gap-10 flex">
            <img
              src="https://pagedone.io/asset/uploads/1717500460.png"
              alt="pagedone logo image"
              class="object-cover"
            />
            <div class="flex-col justify-center items-center gap-10 flex">
              <div class="flex-col justify-start items-center gap-2.5 flex">
                <h2
                  class="text-center text-emerald-400 md:text-6xl text-5xl font-bold font-manrope leading-normal"
                >
                  Coming Soon
                </h2>
                <p class="text-center text-gray-500 text-base font-normal leading-relaxed">
                  Just 20 days remaining until the big reveal of our new product!
                </p>
              </div>
              <div class="flex items-start justify-center w-full gap-2 count-down-main">
                <div class="timer flex flex-col gap-0.5">
                  <div class="">
                    <h3
                      class="countdown-element days text-center text-white text-2xl font-bold font-manrope leading-9"
                    ></h3>
                  </div>
                  <p class="text-center text-gray-500 text-xs font-normal leading-normal w-full">
                    DAYS
                  </p>
                </div>
                <h3
                  class="w-3 text-center text-gray-500 text-2xl font-medium font-manrope leading-9"
                >
                  :
                </h3>
                <div class="timer flex flex-col gap-0.5">
                  <div class="">
                    <h3
                      class="countdown-element hours text-center text-white text-2xl font-bold font-manrope leading-9"
                    ></h3>
                  </div>
                  <p class="text-center text-gray-500 text-xs font-normal leading-normal w-full">
                    HRS
                  </p>
                </div>
                <h3
                  class="w-3 text-center text-gray-500 text-2xl font-medium font-manrope leading-9"
                >
                  :
                </h3>
                <div class="timer flex flex-col gap-0.5">
                  <div class="">
                    <h3
                      class="countdown-element minutes text-center text-white text-2xl font-bold font-manrope leading-9"
                    ></h3>
                  </div>
                  <p class="text-center text-gray-500 text-xs font-normal leading-normal w-full">
                    MINS
                  </p>
                </div>
                <h3
                  class="w-3 text-center text-gray-500 text-2xl font-medium font-manrope leading-9"
                >
                  :
                </h3>
                <div class="timer flex flex-col gap-0.5">
                  <div class="">
                    <h3
                      class="countdown-element seconds text-center text-white text-2xl font-bold font-manrope leading-9"
                    ></h3>
                  </div>
                  <p class="text-center text-gray-500 text-xs font-normal leading-normal w-full">
                    SECS
                  </p>
                </div>
              </div>
              <div class="w-full flex-col justify-center items-center gap-5 flex">
                <h6 class="text-center text-emerald-400 text-base font-semibold leading-relaxed">
                  Launched Date: July 23, 2024
                </h6>
                <div class="justify-center items-center gap-2.5 flex sm:flex-row flex-col">
                  <input
                    type="text"
                    class="w-80 focus:outline-none px-3.5 py-2 shadow-[0px_1px_2px_0px_rgba(16,_24,_40,_0.05)] text-gray-900 placeholder-gray-400 text-sm font-normal leading-relaxed h-10 bg-white rounded-lg border border-gray-200 justify-start items-center gap-1.5 inline-flex"
                    placeholder="Type your mail..."
                  />
                  <button
                    class="sm:w-fit w-full px-3.5 py-2 bg-emerald-400 hover:bg-emerald-600 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-gray-900 text-sm font-medium leading-6 whitespace-nowrap"
                      >Notify Me</span
                    >
                  </button>
                </div>
              </div>
            </div>
          </div>
          <p class="text-center text-gray-500 text-sm font-normal leading-snug">
            Get in touch with us:
            <a href="" class="hover:text-gray-100 transition-all duration-700 ease-in-out">
              [email protected]</a
            >
          </p>
        </div>
      </div>
    </section>

    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/src/js/pagedone.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>

    <!--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>
  </body>
HTML Copy
Basic Coming Soon page

Related Blocks

Splitted coming soon page

Circular countdown coming soon page

Tailwind is coming soon with a gradient background

Dark tailwinds are coming soon.

Tailwind is coming soon.
