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

8.9k

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.2k
Music Player

Author:
Abhijit Sen

2 years ago

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

Author:
Prajwal Hallale

1 year ago

20.6k
Number counter input

Author:
Prem..

2 years ago

14.9k
Exapnd and collapse button for large content without javascript
Truncate and expand on click large content without using JavaScript.

Author:
Komal Jain

7 months ago

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

Author:
Akmaljon Muhammadjonov

1 month ago

209
"Coming Soon" landing page with countdown timer

Author:
Prajwal Hallale

1 year ago

6.2k
Working back to top button
The "Scroll to top" button becomes visible when the user starts to scroll the page Clicking on that button takes you back to the top of the page. This is a great feature to have on any website especially if your content is long.

Author:
Prashant

2 years ago

13.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

7 months ago

1.5k
WYSIWYG Editor Form
Form with CKEditor

Author:
I.P. Leroy

1 year ago

14.4k
Periodic Table with Tailwind CSS

Author:
Michael Andreuzza

9 months ago

1.5k
Detect Screen Breakpoints with Tailwind CSS

Author:
Prajwal Hallale

2 years ago

8.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2000+ 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