Animated Coming Soon Page 1

animated coming soon landing page

This tailwind example is contributed by Repal co, on 10-Mar-2025. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are Front page,upcoming, Pre-launch page, Teaser page, Under construction page, Placeholder page, Sneak peek page,Launch page

Landing Page Coming Soon Page

Author Repal co

Tailwind v3.4 1.5k 3

Fork Fullscreen

<div class="h-screen w-full flex items-center justify-center bg-gray-50 dark:bg-gray-900">
  <div
    class="absolute animate-[cbounce_4s_ease-in-out_infinite] z-10 w-full h-[50%] flex flex-col justify-end items-center bg-gray-50 dark:bg-gray-900">
    <h1
      class="sm:text-9xl text-7xl font-extrabold font-mono bg-gradient-to-r from-green-500 via-indigo-400 to-indigo-600 inline-block text-transparent bg-clip-text">
      Coming</h1>
  </div>
  <div class="absolute w-full h-[50%] flex flex-col items-center justify-end bg-gray-50 dark:bg-gray-900">
    <h1
      class="sm:text-7xl text-6xl text-center font-mono font-extrabold bg-gradient-to-r from-green-500 via-indigo-400 to-indigo-600 inline-block text-transparent bg-clip-text">
      Soon</h1>
    <div id="countdown" class="flex items-center justify-center text-gray-500 dark:text-white text-2xl font-extrabold">
      <span id="days" class="px-2"></span>
      <span id="hours" class="px-2"></span>
      <span id="minutes" class="px-2"></span>
      <span id="seconds" class="px-2"></span>
    </div>
  </div>

</div>
<script>
  // Set the date we're counting down to (adjust the date and time)
  const countDownDate = new Date("april 30, 2025 00:00:00").getTime();

// 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 + " D";
    document.getElementById("hours").innerHTML = hours + " H"
    document.getElementById("minutes").innerHTML = minutes + " M";
    document.getElementById("seconds").innerHTML = seconds + " S";

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

Related Examples

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

Noob

4 years ago

11.4k
vav bar
html , css

Hacker Development

1 year ago

1.5k
Hero

Hasan AlDoy (McDoy)

1 year ago

2k
landi page template

Raul antonio de la cruz hernandez

9 months ago

763
Coming soon page

Samuel Dawson

3 years ago

19.3k
hero template

Raul antonio de la cruz hernandez

8 months ago

629
Flour mill website landing page template
flour mill and services template website which comprise of many sections like about us, featured products, why us, visit us

Amit Pachange

2 years ago

16k
PIXEL.DEV | Portfolio
Personal portofolio

Alif Bima Pradana

6 months ago

725
About Us
This The About Us Component with the tailwind class and some animation by tailwind and best about us page you can modify it and content is for now only clinic but you can ad your content

Sahil Sasapara

2 years ago

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

81

1 year ago

1.1k
Landing page template
Template de landing page com vídeo

viva afro

1 year ago

1.4k
Premium High-Performance Web Gaming Hub
Experience the future of browser-based gaming. I’ve developed a premium arcade hub designed for speed, clarity, and zero-latency gameplay. Built with modern web technologies, Ayyamperumal Games brings AAA-inspired visuals and high-octane mechanics directly to your browser—no downloads, no lag, just pure performance. Explore a curated library of titles ranging from minimalist logic puzzles like Sudoku Elite to fast-paced action in Neon Drift. This is where clean code meets high-level entertainment.

Ayyamperumal S

9 months ago

943