Here is how I built the countdown timer at the top of CodeSwaps

<a class="countdown-wrapper" href="https://www.codeswaps.com/giving-away-1500-dollars/" target="_blank"> ⚡️ $1500 CodeSwaps Giveaway! 2nd winner in: <div id="countdown"> <div class="countdown-timer"> <div class="countdown-timer-group"> <div id="days" class="countdown-timer-digits"></div><span>Days</span> </div> <div class="countdown-timer-group"> <div id="hours" class="countdown-timer-digits"></div><span>Hours</span> </div> <div class="countdown-timer-group"> <div id="minutes" class="countdown-timer-digits"></div><span>Mins</span> </div> <div class="countdown-timer-group"> <div id="seconds" class="countdown-timer-digits"></div><span>Secs</span> </div> </div> </div> </a> 

.countdown-wrapper { color: #fff; text-align: center; display: flex; text-decoration: none; font-size: 18px; justify-content: center; align-items: center; width: 100%; padding: 2px 10px; background: #000; min-height: 60px; border-bottom: 1px solid #333; animation: slideDown 0.3s; animation-delay: 1s; animation-fill-mode:forwards, none; animation-iteration-count: 1; animation-timing-function: ease; transform: translateY(-100%); opacity: 0; @keyframes slideDown { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } &:hover, &:visited { color: #fff; } } .countdown-timer { display: flex; margin: 4px 10px 0 10px; justify-content: center; &-group { display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 0 4px; min-width: 38px; } &-digits { background: #ffd803; color: #141414; font-weight: 700; padding: 3px 0; border-radius: 3px; margin: 0 4px; display: block; width: 100%; } span { font-size: 11px; margin-top: 2px; display: block; } } 

(function () { const second = 1000, minute = second * 60, hour = minute * 60, day = hour * 24; //Change end date as required, next deadline is end of August let givesway = "Aug 30, 2021 00:00:00", countDown = new Date(givesway).getTime(), x = setInterval(function() { let now = new Date().getTime(), distance = countDown - now; document.getElementById("days").innerText = Math.floor(distance / (day)), document.getElementById("hours").innerText = Math.floor((distance % (day)) / (hour)), document.getElementById("minutes").innerText = Math.floor((distance % (hour)) / (minute)), document.getElementById("seconds").innerText = Math.floor((distance % (minute)) / second); //hide when date is reached if (distance < 0) { let countdownBanner = document.getElementById("countdown-banner"); countdownBanner.style.display = "none"; clearInterval(x); } //seconds }, 0) }());