Simple count down timer

This tailwind example is contributed by Gopi Yadav, on 01-Jan-2023. Component is made with Tailwind v3.4. similar terms for this example are Timer,Time counter

Other Widget Countdown Timer

Author Gopi Yadav

Tailwind v3.4 15.5k 18

Fork Fullscreen

<div class="flex justify-center">
    <div class="bg-gray-50 rounded-lg shadow-lg px-8 py-6">
        <div class="flex flex-col gap-4 items-center justify-between">
            <h3 class="text-2xl font-bold text-gray-700">Countdown Timer</h3>
            <span id="countdown" class="text-2xl font-semibold text-gray-700"></span>
        </div>

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

background animation
background animation

Anonymous

3 years ago

53k
Sticky fullpage pages / slides

Laurits

3 years ago

16.6k
Simple count down timer

Alfredo Pineda Hernández

3 years ago

10.5k
Show user details

Lucas Martinez

3 years ago

26.2k
Upvote downvote buttons [alpine]
upvote and downvote buttons made as working version in alpine.js

Anonymous

3 years ago

9.6k
Music Player

Abhijit Sen

3 years ago

18.4k
Privacy policy page template

Sameer Sultana

3 years ago

19.8k
Number counter input

Prem..

3 years ago

16.7k
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.

Prashant

4 years ago

15.6k
Speedometer Example
Internet speed meter, gauge meter

Brandon D

4 years ago

15.2k
Periodic Table with Tailwind CSS

Michael Andreuzza

2 years ago

3k
Calculator
This calculator uses CSS although it can be passed directly to tailwind

Ameth Galarcio

2 years ago

2.6k