Coming Soon Pages Tailwind CSS

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

                                                <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"> mail@pagedone.com</a></p>
            </div>
        </div>
    </section>
<!--Javascript-->
<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

Splitted coming soon page

Use the following example, where you can show the description, CTA form, social icons, and countdown timer side by side.

Preview
Code

Figma File

Circular countdown coming soon page

The following example of tailwind CSS coming soon page shows nicely crafted content in a circular progressbar style with a gradient background.

Preview
Code

Figma File

Tailwind is coming soon with a gradient background.

This example shows a heading, countdown timer, and CTA form with social icons on a gradient background.

Preview
Code

Figma File

Dark tailwinds are coming soon.

Use the following example to show a basic description with social icons and a call-to-action form. This example is specially designed for the dark mode theme.

Preview
Code

Figma File

Tailwind is coming soon.

This example can be used to show only a countdown timer with a notification form and social icons on a beautiful background image.

Preview
Code

Figma File