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.7k

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

11 months ago

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

Author:
Anonymous

10 months ago

1.9k
Coming Soon Page
Modern , gradient coming soon page

Author:
Rajesh Maheshwari

2 months ago

374
Animated Coming Soon Page 1
animated coming soon landing page

Author:
Repal co

2 months ago

279
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

1 week ago

132
Standard Landing Boilerplate

Author:
Hasan AlDoy (McDoy)

4 months ago

456
Landing Page Template
source https://github.com/gary149/tailwindcss-landing-gradients/blob/master/index.html

Author:
Conan Hilton

2 years ago

14.2k
Onepage M3u8 Video Sample

Author:
Sedat Kumcu

5 months ago

957
Coming soon page with countdown

Author:
Samuel Dawson

2 years ago

14.2k
home
html , css

Author:
Hacker Development

1 week ago

138
login!!!!
html , css

Author:
Hacker Development

1 week ago

7
landing page
web Design

Author:
Hacker Development

2 weeks ago

160

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components