Home
$@(\/)(\/)Y
Animated Coming Soon Page 2

Animated Coming Soon Page 2

Animated Coming soon Page

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

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

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

2.9k

Fork Fullscreen

<div
  class="h-screen w-full flex flex-col justify-center items-center bg-gray-900 dark:bg-gradient-to-r from-blue-400 to-cyan-300">
  <div
    class="absolute animate-bounce z-10 w-full h-[50%] flex justify-center items-end bg-gray-900 dark:bg-gradient-to-r from-blue-400 to-cyan-300">
    <h1 class="sm:text-9xl text-7xl font-extrabold animate-[wiggle_1s_ease-in-out_infinite] text-indigo-500 font-mono">
      Coming</h1>
  </div>
  <div
    class="absolute w-full h-[50%] flex items-end justify-center bg-gray-900 dark:bg-gradient-to-r from-blue-400 to-cyan-300">
    <h1
      class="sm:text-7xl text-5xl animate-[wiggle_1s_ease-in-out_infinite] text-center text-white dark:text-gray-600 font-extrabold">
      Soon</h1>
  </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

Animated Coming Soon Page 1
animated coming soon landing page

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

1 year ago

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

Author:
Anonymous

1 year ago

2.1k
Coming Soon Page
Modern , gradient coming soon page

Author:
Rajesh Maheshwari

4 months ago

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

Author:
Repal co

4 months ago

368
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

2 months ago

660
Animated Coming Soon Page 1
animated coming soon landing page

Author:
81

1 month ago

117
SomaRwanda
Menya uburyo bwo kwandika ibisomwa, impuzandimi, n'imyandikire y'icyongereza mu buryo bworoshye.

Author:
Code Master(Mfuranziza Dusabe Hamza)

1 month ago

439
"Coming Soon" landing page component

Author:
Anonymous

1 year ago

10k
Animated Coming Soon 4

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

6 months ago

1.1k
Landing page

Author:
Freja Jensen

2 years ago

12.8k
"Coming Soon" landing page with countdown timer

Author:
Prajwal Hallale

1 year ago

6.4k
3D Coming Soon Page
Here’s a modern, interactive 3D "Coming Soon" page built with Tailwind CSS, featuring floating elements, glass morphism, and subtle animations. Perfect for product launches, portfolios, or SaaS pre-launch pages

Author:
dev-fab250

2 months ago

345

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components