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

Author:
Samuel Dawson

2 years ago

18.3k
Coming soon landing page template

Author:
Brandon D

2 years ago

10.8k
Simple coming soon page

Author:
Adia Okonkwo

2 years ago

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

4 months ago

411
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)

3 months ago

457
Maintenance page template
The site is under maintenance placeholder page

Author:
Anonymous

1 year ago

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

Author:
Anonymous

1 year ago

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

Author:
Repal co

6 months ago

565

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components