Animated Coming Soon Page 1

animated coming soon landing page

This tailwind example is contributed by $@(\/)(\/)¥, on 15-Jun-2024. 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

$$@(\/)(\/)¥ profile image$

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

Tailwind v3.4 4.7k

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("Sep 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

Organize your work, master your flow
Organize your work, master your flow

Tanvir Hasan Bappy (Tanvir)

8 months ago

312
Simple coming soon page

Freja Jensen

3 years ago

11.6k
EduChina
EduChina

Tanvir Hasan Bappy (Tanvir)

1 year ago

1.3k
Onepage M3u8 Video Sample

Sedat Kumcu

1 year ago

2.5k
HealthLife - Modern Health Solutions
Health & Lifestyle website landing page

Alif Bima Pradana

7 months ago

548
Video Player
Youtube Video Player

KULDEEP

1 year ago

1.2k
Portfolio by omerlinks the mouse
Portfolio by omerlinks the mouse

Omer fils ELENGA

8 months ago

835
card bento

Omer fils ELENGA

1 week ago

36
e-commerce website landing page template with Tailwind CSS.
A clean, responsive e-commerce & blog template built with Tailwind CSS. Features light/dark mode, dynamic featured posts, hero, CTA, and SEO-ready sections.

Homayoun

9 months ago

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

Noah Schmidt

3 years ago

16.4k
About Company Section – Animated & Responsive
A modern "About Us" section built with Tailwind CSS and Alpine.js, designed to highlight your company’s story, achievements, and values through a clean and animated layout. This component features smooth scroll animations, responsive design, and a balanced two-column layout — one for text content and one for an image with company stats. It’s perfect for corporate websites, SaaS platforms, or startup landing pages that want to showcase professionalism and credibility. ✨ Key Features Elegant fade-in and slide-up animations using Alpine.js Responsive grid layout optimized for all screen sizes Dark mode support built-in Dynamic stats display (years, team size, countries served) Clean Tailwind CSS design with easy customization

wavy kits

1 year ago

1.2k
Moving Background Animation

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

1 year ago

4.3k