Home
Repal co
Animated Coming Soon Page 1

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

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

Animated Coming Soon Page 3

Author:
Samuel Abera

3 months ago

956
Small landing

Author:
Crimson

2 months ago

438
Simple coming soon page

Author:
Adia Okonkwo

2 years ago

18.3k
Coming soon page

Author:
Samuel Dawson

2 years ago

16.9k
My Personal Landing page
This HTML document showcases Aydin Vesali Moghaddam's personal portfolio, highlighting his journey in web development. The page features a responsive design that adapts to various screen sizes, ensuring a seamless user experience across devices. It includes a personal introduction, a brief overview of Aydin's tech journey, and a contact form for visitors to subscribe to updates. Additionally, the page provides links to Aydin's Discord, website, and Twitter, offering multiple avenues for connecting and staying updated on his projects.

Author:
AyDin VM

1 year ago

4.4k
Product Landing Page

Author:
Noob

2 years ago

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

Author:
Anonymous

1 year ago

7.4k
Banner with Form

Author:
Aitrik Saha

2 months ago

283
Coming soon landing page template

Author:
Brandon D

2 years ago

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

Author:
Noah Schmidt

2 years ago

12.4k
Fully Animated Timeline Card
It is at a 20s interval for testing purposes. Go to the <style> and change the .content-scroll class from 20s to 35s for a production ready slower animation.

Author:
Coastal UI

4 months ago

989
"Coming Soon" landing page component

Author:
Anonymous

1 year ago

9.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components