Simple count down timer

Forked from @gopi/simple-count-down-timer

This tailwind example is contributed by Alfredo Pineda Hernández, on 11-Jul-2023. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are Timer,Time counter

Widget Countdown Timer

Author Alfredo Pineda Hernández

Tailwind v3.4 10.5k 8

Fork Fullscreen

<div class="flex justify-center">
    <div class="bg-gray-50 rounded-lg shadow-lg px-4 py-2">
        <div class="flex flex-col gap-2 items-center justify-between">
            <span id="countdown" class="text-lg sm:text-sm font-semibold"></span>
        </div>

<script>
            // Set the date we're counting down to
            var countDownDate = new Date("Sep 5, 2027 15:37:25").getTime();

// Update the count down 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);

// Output the result in an element with id="countdown" 
                document.getElementById("countdown").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds +
                    "s ";

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

Related Examples

Simple count down timer

Gopi Yadav

3 years ago

15.5k
Music Player

Abhijit Sen

3 years ago

18.4k
Read more / Show more button with hide button
"hide" button that appears when the additional content is displayed:

Prajwal Hallale

3 years ago

22.2k
3D Count downer

Hasan AlDoy (McDoy)

4 months ago

318
Progress bar with Tailwind CSS and Javascript
How to a create a scroll progress bar with Tailwind CSS and Javascript

Michael Andreuzza

2 years ago

3.1k
Code Block with Copy Button
this example uses clipboard.js to copy the code

Alok

3 years ago

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

TailwindFlex

3 years ago

10.1k
Card-Product
Product card for vertical windows, if you need a more complete version to show more information, you have other options in my profile

Ameth Galarcio

2 years ago

3.2k
counter compteur
counter compteur

Omer fils ELENGA

10 months ago

479
Sticky fullpage pages / slides

Hasan AlDoy (McDoy)

1 year ago

1.9k
Sticky fullpage pages / slides

Laurits

3 years ago

16.6k
Number counter input

Prem..

3 years ago

16.7k

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.