Home
Anonymous
"Coming Soon" landing page with countdown timer

"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 CSS v3. 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

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

Author:
Prajwal Hallale

2 years ago

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

Author:
TailwindFlex

2 years ago

8.4k
"Coming Soon" landing page with countdown timer

Author:
Prajwal Hallale

1 year ago

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

Author:
Noah Schmidt

2 years ago

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

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

11 months ago

3.5k
Clean AI Chat UI with Tailwind CSS – ChatGPT-Style Interface
A polished and responsive AI chat interface built using modern Web Components and Tailwind CSS. This UI replicates the smooth, minimal experience of ChatGPT with a clean layout, floating input bar, animated scrollable message feed, and mock AI responses. Ideal for SaaS dashboards, AI assistants, or frontend prototypes. Designed with professional spacing, accessible colors, and reusable components. Key features: Responsive layout with mobile support Floating input bar with auto-expanding textarea Tailwind-powered message bubbles with clear sender roles Modern dark theme with subtle gradients and shadows Easily extendable to real AI APIs (e.g., OpenAI)

Author:
Ayyamperumal S

5 days ago

28
Animated Coming Soon 4

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

4 months ago

876
Simple count down timer

Author:
Alfredo Pineda Hernández

1 year ago

9.2k
Maintenance page

Author:
Faye

5 months ago

805
Animated Coming Soon Page 1
animated coming soon landing page

Author:
Anonymous

10 months ago

1.9k
Coming Soon Page

Author:
Conan Hilton

2 years ago

9.4k
Simple coming soon page

Author:
broouklyn co. tutorials

1 year ago

2.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components