"Coming Soon" landing page with countdown timer

Forked from @prajwal/coming-soon-landing-page-with-countdown-timer

This tailwind example is contributed by Anonymous, on 13-May-2025. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are upcoming, Pre-launch page, Teaser page, Under construction page, Placeholder page, Sneak peek page,Launch page,Timer,Time counter

Coming Soon Page Countdown Timer

Author Anonymous

Tailwind v3.4 1.2k 1

Fork Fullscreen

<div class="bg-gray-900 h-screen flex flex-col items-center justify-center text-white">
  
  <h1 class="text-4xl font-bold mb-6">Coming Soon</h1>

<div class="flex text-2xl mb-6">
    <div class="mr-2">
      <span id="days" class="font-semibold">00</span> Days
    </div>
    <div class="mr-2">
      <span id="hours" class="font-semibold">00</span> Hours
    </div>
    <div class="mr-2">
      <span id="minutes" class="font-semibold">00</span> Minutes
    </div>
    <div>
      <span id="seconds" class="font-semibold">00</span> Seconds
    </div>
  </div>

<form class="flex flex-col sm:flex-row items-center space-y-2 sm:space-y-0 sm:space-x-2">
    <input
      type="email"
      placeholder="Enter your email"
      class="rounded-full px-4 py-2 bg-gray-800 text-white placeholder-gray-400 focus:outline-none focus:ring focus:ring-blue-400"
    />
    <button
      type="submit"
      class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-6 rounded-full transition duration-300"
    >
      Subscribe
    </button>
  </form>

<div class="mt-4 space-x-4">
    <a href="#" class="text-gray-400 hover:text-white">
      <i class="fab fa-facebook-f"></i>
    </a>
    <a href="#" class="text-gray-400 hover:text-white">
      <i class="fab fa-twitter"></i>
    </a>
    <a href="#" class="text-gray-400 hover:text-white">
      <i class="fab fa-instagram"></i>
    </a>
  </div>
</div>

// Update the countdown every 1 second
  const x = setInterval(function () {
    // Get the current date and time
    const now = new Date().getTime();

// Calculate the time remaining
    const distance = countDownDate - now;

// Calculate days, hours, minutes, and seconds
    const days = Math.floor(distance / (1000 * 60 * 60 * 24));
    const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((distance % (1000 * 60)) / 1000);

// Display the countdown in the HTML
    document.getElementById("days").innerHTML = days;
    document.getElementById("hours").innerHTML = hours;
    document.getElementById("minutes").innerHTML = minutes;
    document.getElementById("seconds").innerHTML = seconds;

// If the countdown is over, display a message
    if (distance < 0) {
      clearInterval(x);
      document.getElementById("countdown").innerHTML = "EXPIRED";
    }
  }, 1000);
</script>

Related Examples

Coming soon page with working count down timer
Update the date according to your need

Prajwal Hallale

3 years ago

8.2k
Coming soon page with working count down timer
Update the date according to your need

TailwindFlex

3 years ago

10.2k
"Coming Soon" landing page with countdown timer

Prajwal Hallale

3 years ago

6.5k
Maintenance page template
The site is under maintenance placeholder page

Anonymous

2 years ago

12.1k
Simple count down timer

Gopi Yadav

3 years ago

15.5k
counter compteur
counter compteur

Omer fils ELENGA

10 months ago

481
Animated Coming Soon Page 1
animated coming soon landing page

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

4.7k
404 Page Not Found

KULDEEP

1 year ago

2.1k
Coming Soon Section
Simple and beautiful card for your showing on your projects (in development) home screen

Noob

3 years ago

11.3k
Coming soon page

Samuel Dawson

3 years ago

19.3k
Animated Coming Soon Page 1
animated coming soon landing page

81

1 year ago

1.1k
Website Pricing List Card Component
Website Pricing List Card Component with Package Names: Basic Package → Starter Website Premium Package → Business Website Professional Package → E-Commerce Solution Pricing Structure: Increased prices significantly to reflect web development services one-time payment model FAQ Content.

Ayyamperumal S

1 year ago

1.7k