Home
Anonymous
Animated Coming Soon Page 1

Animated Coming Soon Page 1

Forked from> @sammytg7/coming-soon-page-3

animated coming soon landing page

This tailwind example is contributed by Anonymous, on 11-Jul-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

Author Anonymous

2.2k

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-[20%] 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">
      قريباً</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">
      Coming 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, 2024 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;

// 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.9k
Animated Coming Soon Page 2
Animated Coming soon Page

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

1 year ago

3.1k
Coming Soon Page
Modern , gradient coming soon page

Author:
Rajesh Maheshwari

5 months ago

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

Author:
Repal co

5 months ago

486
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

3 months ago

819
Animated Coming Soon Page 1
animated coming soon landing page

Author:
81

2 months ago

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

Author:
Code Master(Mfuranziza Dusabe Hamza)

2 months ago

468
home
html , css

Author:
Hacker Development

3 months ago

968
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

5.4k
Rwandan farmers with Canadian markets through sustainable, fair trade practices.
Key Features of This Website: Professional Design: Clean, modern interface with orange/green color scheme representing mangoes and agriculture Fully responsive layout that works on all devices Comprehensive Sections: Hero section highlighting the Rwanda-Canada mango trade Product showcase with different mango varieties Current market pricing table Detailed farm-to-table process explanation Company information and impact metrics Testimonials from partners Contact form and information Trade-Specific Content: Focus on Rwandan mango varieties suitable for Canadian markets Pricing in both USD and kg units common in agricultural trade Information about certifications and compliance Shipping and logistics details User Experience: Clear calls-to-action for quotes and orders Easy navigation between sections Newsletter signup for market updates Contact information prominently displayed Trust Elements: Certifications and compliance badges Impact statistics showing benefits to Rwandan farmers Testimonials from Canadian partners

Author:
Code Master(Mfuranziza Dusabe Hamza)

1 month ago

305
Maintenance page

Author:
Faye

8 months ago

1.2k
Video Player
Youtube Video Player

Author:
KULDEEP

1 month ago

106

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components