Coming soon page with working count down timer

Update the date according to your need

This tailwind example is contributed by Prajwal Hallale, on 29-Mar-2023. Component is made with Tailwind v3.4. It is responsive. 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 Prajwal Hallale

Tailwind v3.4 8.2k 7

Fork Fullscreen

<div class="h-screen flex justify-center items-center px-2 bg-gradient-to-tr from-sky-300 via-sky-400 to-blue-500">
    <div class="max-w-lg mx-auto bg-white shadow-lg rounded-lg overflow-hidden">

<div class="py-4 px-6">
            <h2 class="text-4xl font-bold text-gray-800">Coming Soon</h2>
            <p class="mt-2 text-lg text-gray-600">We are working hard to bring you an amazing website. Stay tuned!</p>
        </div>

<div class="py-4 px-6">
            <div class="flex flex-wrap gap-4 justify-center items-center">
                <div class="border rounded-lg px-4 py-2">
                    <div id="days" class="font-bold font-mono text-2xl text-gray-800"></div>
                </div>
                <div class="border rounded-lg px-4 py-2">
                    <div id="hours" class="font-bold font-mono text-2xl text-gray-800"></div>
                </div>
                <div class="border rounded-lg px-4 py-2">
                    <div id="minutes" class="font-bold font-mono text-2xl text-gray-800"></div>
                </div>
                <div class="border rounded-lg px-4 py-2">
                    <div id="seconds" class="font-bold font-mono text-2xl text-gray-800"></div>
                </div>
            </div>
        </div>

</div>

<script>
        // Set the date we're counting down to
        var countDownDate = new Date("Jan 1, 2025 00:00:00").getTime();

// 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

Samuel Dawson

3 years ago

15.3k
Coming soon landing page template

Brandon D

3 years ago

11.6k
Coming soon page

Samuel Dawson

3 years ago

19.3k
Simple coming soon page

Adia Okonkwo

3 years ago

21.2k
Maintenance page template
The site is under maintenance placeholder page

Noah Schmidt

3 years ago

16.4k
"Coming Soon" landing page with countdown timer

Prajwal Hallale

3 years ago

6.5k
Simple coming soon page
with background-image

TailwindFlex

3 years ago

15k
Minimal coming soon page

Freja Jensen

3 years ago

11.4k
Coming soon landing page

Odessa Young

3 years ago

12.2k
Coming Soon Page

Conan Hilton

4 years ago

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

TailwindFlex

3 years ago

10.2k
Coming soon page with newsletter

Samuel Dawson

3 years ago

11.8k

Browse by topic

Explore components by Tags

Jump straight to the UI pattern you need.

Footer Header Card Article Avatar FAQ Banner Blog Breadcrumb Button Call to Action Form Carousel Contact us Error page Feature Gallery Hero Input Spinner Login Modal Pagination Pricing Profile

Can't find it?

Didn't find the component you were looking for?

Search across 3,000+ community-built components and grab the code in seconds.