Home
Alfredo Pineda Hernández
Simple count down timer

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 CSS v3. It is responsive. It supports dark mode. similar terms for this example are Timer,Time counter

Widget Countdown Timer

Author Alfredo Pineda Hernández

9.2k

5

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

Author:
Gopi Yadav

2 years ago

14.5k
Music Player

Author:
Abhijit Sen

2 years ago

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

Author:
Prajwal Hallale

2 years ago

20.9k
Code card with copy Button
this example uses clipboard.js to copy the code

Author:
Akmaljon Muhammadjonov

2 months ago

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

Author:
TailwindFlex

2 years ago

8.2k
Strong password generator
With following options Password length: Include Uppercase Letters: Include Numbers: Include Symbols:

Author:
S. Patel

2 years ago

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

Author:
Ameth Galarcio

8 months ago

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

Author:
Alok

1 year ago

17.3k
Exapnd and collapse button for large content
Truncate and expand on click large content with javascript. uses line clamp.

Author:
Komal Jain

8 months ago

1.5k
Play Music - Reproductor
Multimedia music player, with its respective dark mode

Author:
Ameth Galarcio

8 months ago

1.6k
Periodic Table with Tailwind CSS

Author:
Michael Andreuzza

11 months ago

1.8k
Number counter input

Author:
Prem..

2 years ago

15.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.1