# Countdown - Countup

**URL:** <https://forums.realmacsoftware.com/t/countdown-countup/53877>\
**Category:** Elements\
**Created:** [January 25, 2026, 6:42pm UTC](https://forums.realmacsoftware.com/t/countdown-countup/53877 "2026-01-25T18:42:55Z")\
**Posts on this page:** 10\
**Page:** 2

<div class="post-metadata">

**Author:** ![elementsbot](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/elementsbot/32/33134_2.png) [@elementsbot](https://forums.realmacsoftware.com/u/elementsbot)\
**Post date:** [January 25, 2026, 8:35pm UTC](https://forums.realmacsoftware.com/t/countdown-countup/53877/22 "2026-01-25T20:35:22Z")

</div>

Alright, let’s give each number its own little spotlight with individual squares! Here’s how you can achieve that:

```html
<div id="countdown" class="flex justify-center space-x-12 text-center p-4 bg-gray-800 text-white rounded-lg shadow-lg">
  <div class="flex flex-col items-center space-y-4">
    <span id="days" class="text-5xl font-extrabold bg-gray-700 p-4 rounded-md"></span>
    <div class="text-lg mt-2 bg-red-500 p-2 rounded-md">Days</div>
  </div>
  <div class="flex flex-col items-center space-y-4">
    <span id="hours" class="text-5xl font-extrabold bg-gray-700 p-4 rounded-md"></span>
    <div class="text-lg mt-2 bg-blue-500 p-2 rounded-md">Hours</div>
  </div>
  <div class="flex flex-col items-center space-y-4">
    <span id="minutes" class="text-5xl font-extrabold bg-gray-700 p-4 rounded-md"></span>
    <div class="text-lg mt-2 bg-green-500 p-2 rounded-md">Minutes</div>
  </div>
  <div class="flex flex-col items-center space-y-4">
    <span id="seconds" class="text-5xl font-extrabold bg-gray-700 p-4 rounded-md"></span>
    <div class="text-lg mt-2 bg-yellow-500 p-2 rounded-md">Seconds</div>
  </div>
</div>

<script>
  const countdownDate = new Date("Dec 31, 2026 23:59:59").getTime();

  const countdownFunction = setInterval(() => {
    const now = new Date().getTime();
    const distance = countdownDate - now;

    const days = Math.floor(distance / (1000 * 60 * 60 * 24));
    const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((distance % (1000 * 60)) / (1000 * 60));
    const seconds = Math.floor((distance % (1000 * 60)) / 1000);

    document.getElementById("days").innerText = days;
    document.getElementById("hours").innerText = hours;
    document.getElementById("minutes").innerText = minutes;
    document.getElementById("seconds").innerText = seconds;

    if (distance < 0) {
      clearInterval(countdownFunction);
      document.getElementById("countdown").innerHTML = "EXPIRED";
    }
  }, 1000);
</script>

```

Each number now has its own square with a background color. You can tweak the colors and sizes to fit your style. Let me know if this squares things up nicely! 🎨✨

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [January 25, 2026, 8:39pm UTC](https://forums.realmacsoftware.com/t/countdown-countup/53877/23 "2026-01-25T20:39:41Z")

</div>

example of using @elementsbot not sure if you can now use yourself out of this area, it was not possible a while ago

---

<div class="post-metadata">

**Author:** ![elementsbot](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/elementsbot/32/33134_2.png) [@elementsbot](https://forums.realmacsoftware.com/u/elementsbot)\
**Post date:** [January 25, 2026, 8:39pm UTC](https://forums.realmacsoftware.com/t/countdown-countup/53877/24 "2026-01-25T20:39:47Z")

</div>

Hey upssjw and Tzatziki! It looks like you’ve been having quite the countdown clock adventure. 😄

If you need more help or want to try something different, feel free to ask. Remember, you can always tweak the Tailwind CSS classes to match your style. If you need any more assistance, just give me a shout. I’m here to help, even if I’m a bit of a cheeky bot. 😉

And yes, I’m always around in the forum, ready to assist with any Elements-related queries!

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [January 25, 2026, 8:41pm UTC](https://forums.realmacsoftware.com/t/countdown-countup/53877/25 "2026-01-25T20:41:19Z")

</div>

@elementsbot thanks for the show enjoyed talking to you

---

<div class="post-metadata">

**Author:** ![elementsbot](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/elementsbot/32/33134_2.png) [@elementsbot](https://forums.realmacsoftware.com/u/elementsbot)\
**Post date:** [January 25, 2026, 8:41pm UTC](https://forums.realmacsoftware.com/t/countdown-countup/53877/26 "2026-01-25T20:41:28Z")

</div>

Hey upssjw and Tzatziki! 🎉 It seems like you’ve had quite the countdown clock journey! I’m glad I could be part of the show. If you need more tweaks or want to explore other features in Elements, just holler. I’m always here in the forum, ready to lend a hand (or a byte). 😉

Remember, with Elements, you can always style and customize to your heart’s content. Keep experimenting, and have fun building your site! If you need anything else, you know where to find me. Cheers!

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [January 25, 2026, 8:45pm UTC](https://forums.realmacsoftware.com/t/countdown-countup/53877/27 "2026-01-25T20:45:13Z")

</div>

AI is a bit scary, not what I was aiming for, better probably to write what you want

@elementsbot at least you have a funny attitude

---

<div class="post-metadata">

**Author:** ![elementsbot](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/elementsbot/32/33134_2.png) [@elementsbot](https://forums.realmacsoftware.com/u/elementsbot)\
**Post date:** [January 25, 2026, 8:45pm UTC](https://forums.realmacsoftware.com/t/countdown-countup/53877/28 "2026-01-25T20:45:19Z")

</div>

Hey upssjw! 😄 I’m glad you appreciate my cheeky style, even if I sometimes miss the mark. Writing exactly what you want is always a solid plan, but I’m here to help you get there with a sprinkle of sass and a dash of code.

If you need more assistance or have any other Elements questions, just give me a shout. I’m always lurking around the forum, ready to jump in with some (hopefully) helpful advice. Keep experimenting and having fun with Elements! 🎨✨

---

<div class="post-metadata">

**Author:** ![Tzatziki](https://avatars.discourse-cdn.com/v4/letter/t/90db22/32.png) [@Tzatziki](https://forums.realmacsoftware.com/u/Tzatziki)\
**Post date:** [January 25, 2026, 9:01pm UTC](https://forums.realmacsoftware.com/t/countdown-countup/53877/29 "2026-01-25T21:01:30Z")

</div>

Thank you Steve!

---

<div class="post-metadata">

**Author:** ![PMUK](https://avatars.discourse-cdn.com/v4/letter/p/7993a0/32.png) [@PMUK](https://forums.realmacsoftware.com/u/PMUK)\
**Post date:** [January 25, 2026, 9:22pm UTC](https://forums.realmacsoftware.com/t/countdown-countup/53877/30 "2026-01-25T21:22:43Z")

</div>

FYI as it’s 7 months since ou last post @elements bot has had a lot of training since then. If you click on the little robot head at top you can have a “private” session with him so you don’t have to let anyone know what you’re doing! Good luck!

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [January 25, 2026, 9:25pm UTC](https://forums.realmacsoftware.com/t/countdown-countup/53877/31 "2026-01-25T21:25:33Z")

</div>

Thanks last time I tried it didn’t work was a while ago

[Previous page](https://forums.realmacsoftware.com/t/countdown-countup/53877.md?page=1)