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

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.3k
Coming soon page

Author:
Samuel Dawson

2 years ago

17.9k
Coming soon landing page template

Author:
Brandon D

2 years ago

10.5k
Simple coming soon page

Author:
Adia Okonkwo

2 years ago

19.1k
Simple coming soon page
with background-image

Author:
TailwindFlex

2 years ago

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

1 year ago

6.3k
"Coming Soon" landing page with countdown timer

Author:
Anonymous

2 months ago

221
Simple count down timer

Author:
Alfredo Pineda Hernández

2 years ago

9.4k
Coming Soon Section
Simple and beautiful card for your showing on your projects (in development) home screen

Author:
Noob

2 years ago

9.9k
Why Everyone Around the World Loves Us
"Our platform is built to serve everyone, everywhere — with speed, security, and a human touch." "From cities to remote villages, our features connect the world through technology that truly cares." "Designed with the whole world in mind — fast, secure, and made for real people." "No matter who you are or where you're from, our tools are built to empower and inspire you." "We believe great technology should be accessible, safe, and helpful to all — and that's exactly what we offer."

Author:
Nicole Shalom

1 month ago

293
Animated Coming Soon Page 1
animated coming soon landing page

Author:
Repal co

4 months ago

363

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components