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

517

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

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

Author:
TailwindFlex

2 years ago

8.8k
"Coming Soon" landing page with countdown timer

Author:
Prajwal Hallale

2 years ago

6.4k
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

1 week ago

175
Simple coming soon page

Author:
broouklyn co. tutorials

1 year ago

3k
Coming Soon Countdown Section – Animated & Responsive
A beautifully designed "Coming Soon" landing section built with Tailwind CSS and Alpine.js, perfect for startups, SaaS platforms, and product launches. This component features a live countdown timer, smooth fade-in animations, and floating gradient effects for a futuristic, engaging look. The layout adapts seamlessly to all screen sizes and supports dark mode, creating a professional pre-launch experience that builds anticipation and excitement. ✨ Key Features ⏳ Dynamic countdown timer (days, hours, minutes, seconds) 🎨 Animated gradient orbs for a vibrant background effect 🌙 Dark mode support included 💨 Smooth entrance animations using Alpine.js 📱 Fully responsive design for all devices 🔗 Social media icons to keep your audience connected 💡 Perfect for: Coming Soon or Under Construction pages Product and SaaS pre-launch sites Portfolio or agency landing pages Event or app launch countdowns

Author:
wavy kits

3 weeks ago

133
Maintenance page template
The site is under maintenance placeholder page

Author:
Anonymous

7 months ago

1k
Simple coming soon page

Author:
Adia Okonkwo

2 years ago

19.7k
Simple count down timer

Author:
Alfredo Pineda Hernández

2 years ago

9.5k
Simple coming soon page
with background-image

Author:
TailwindFlex

2 years ago

13.4k
Coming Soon Page
Modern , gradient coming soon page

Author:
Rajesh Maheshwari

8 months ago

1.4k
Coming soon landing page template

Author:
Brandon D

2 years ago

10.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components