Home
TailwindFlex
Coming soon page with working count down timer

Coming soon page with working count down timer

Forked from> @prajwal/coming-soon-page-with-working-count-down-timer

Update the date according to your need

This tailwind example is contributed by TailwindFlex, on 16-Mar-2023. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are upcoming, Pre-launch page, Teaser page, Under construction page, Placeholder page, Sneak peek page,Launch page,Timer,Time counter

Coming Soon Page Countdown Timer

Author TailwindFlex

8.8k

Fork Fullscreen

<section class="h-screen bg-gray-800 py-20">
    <div class="max-w-5xl mx-auto px-6 lg:px-8 flex flex-col items-center justify-center text-center">
        <h2 class="text-4xl lg:text-5xl text-white font-bold mb-8">Our Website is Coming Soon</h2>
        <p class="text-gray-400 text-lg lg:text-xl leading-relaxed mb-12">
            Stay tuned for updates and get ready for an extraordinary experience!
        </p>
        <div class="flex flex-wrap items-center justify-center gap-4 p-2">
            <div class="bg-white rounded-full px-6 py-2 min-w-[120px]">
                <div id="days" class="font-bold text-xl text-gray-800"></div>
                <div class="text-xs uppercase text-gray-500">days</div>
            </div>
            <div class="bg-white rounded-full px-6 py-2 min-w-[120px]">
                <div id="hours" class="font-bold text-xl text-gray-800"></div>
                <div class="text-xs uppercase text-gray-500">hours</div>
            </div>
            <div class="bg-white rounded-full px-6 py-2 min-w-[120px]">
                <div id="minutes" class="font-bold text-xl text-gray-800"></div>
                <div class="text-xs uppercase text-gray-500">minutes</div>
            </div>
            <div class="bg-white rounded-full px-6 py-2 min-w-[120px]">
                <div id="seconds" class="font-bold text-xl text-gray-800"></div>
                <div class="text-xs uppercase text-gray-500">seconds</div>
            </div>
        </div>
    </div>
</section>

// Update the countdown every 1 second
        var x = setInterval(function() {

// Get today's date and time
            var now = new Date().getTime();

// Find the distance between now and the count down date
            var distance = countDownDate - now;

// Time calculations for days, hours, minutes and seconds
            var days = Math.floor(distance / (1000 * 60 * 60 * 24));
            var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((distance % (1000 * 60)) / 1000);

// Display the result in the corresponding elements
            document.getElementById("days").textContent = days + "d";
            document.getElementById("hours").textContent = hours + "h";
            document.getElementById("minutes").textContent = minutes + "m";
            document.getElementById("seconds").textContent = seconds + "s";

// If the count down is over, write some text 
            if (distance < 0) {
                clearInterval(x);
                document.getElementById("countdown").innerHTML = "EXPIRED";
            }
        }, 1000);
</script>
</div>

Related Examples

Coming soon page with countdown

Author:
Samuel Dawson

2 years ago

14.6k
Coming soon page

Author:
Samuel Dawson

2 years ago

18.5k
Coming soon landing page template

Author:
Brandon D

2 years ago

10.8k
Simple coming soon page

Author:
Adia Okonkwo

2 years ago

19.7k
Simple coming soon page
with background-image

Author:
TailwindFlex

2 years ago

13.4k
Coming soon page with working count down timer
Update the date according to your need

Author:
Prajwal Hallale

2 years ago

8.1k
"Coming Soon" landing page with countdown timer

Author:
Prajwal Hallale

2 years ago

6.4k
"Coming Soon" landing page with countdown timer

Author:
Anonymous

5 months ago

516
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

2 days ago

39
Coming soon landing page

Author:
Odessa Young

2 years ago

11.4k
Coming Soon Countdown Section – Animated & Responsive
A beautifully designed "Coming Soon" landing section built with Tailwind CSS and Alpine.js, perfect for startups, SaaS platforms, and product launches. This component features a live countdown timer, smooth fade-in animations, and floating gradient effects for a futuristic, engaging look. The layout adapts seamlessly to all screen sizes and supports dark mode, creating a professional pre-launch experience that builds anticipation and excitement. ✨ Key Features ⏳ Dynamic countdown timer (days, hours, minutes, seconds) 🎨 Animated gradient orbs for a vibrant background effect 🌙 Dark mode support included 💨 Smooth entrance animations using Alpine.js 📱 Fully responsive design for all devices 🔗 Social media icons to keep your audience connected 💡 Perfect for: Coming Soon or Under Construction pages Product and SaaS pre-launch sites Portfolio or agency landing pages Event or app launch countdowns

Author:
wavy kits

1 week ago

24
Maintenance page template
The site is under maintenance placeholder page

Author:
Anonymous

7 months ago

1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components