JSFiddle - React, Tailwind, and code Playground

HTML

<div class="timer__time-count">
  <h2 class="time-count__title">До окончания акции осталось:</h2>
  <div class="time-count__content">
    <div class="time-count__item time-count__days">
      <div class="time-count__val">00</div>
      <div class="time-count__text">дни</div>
    </div>
    <div class="time-count__item time-count__hours">
      <div class="time-count__val">00</div>
      <div class="time-count__text">часы</div>
    </div>
    <div class="time-count__item time-count__minutes">
      <div class="time-count__val">00</div>
      <div class="time-count__text">минуты</div>
    </div>
  </div>
</div>

CSS

.time-count__content {
  display: flex;
}

.time-count__item {
  margin: 0px 60px 0px 0px;
}

.time-count__val>* {
  background: red;
  color: #ffffff;
  text-align: center;
  font-size: 40px;
  margin: 0 2px;
}

JavaScript

document.addEventListener('DOMContentLoaded', () => {
  const newYear = new Date('Aug 22 2022 00:00:00');

  const daysVal = document.querySelector('.time-count__days .time-count__val');
  const hoursVal = document.querySelector('.time-count__hours .time-count__val');
  const minutesVal = document.querySelector('.time-count__minutes .time-count__val');

  const timeCount = () => {
    let now = new Date();
    let leftUntil = newYear - now;

    let days = Math.floor(leftUntil / 1000 / 60 / 60 / 24);
    let hours = Math.floor(leftUntil / 1000 / 60 / 60) % 24;
    let minutes = Math.floor(leftUntil / 1000 / 60) % 60;

    daysVal.innerHTML = days.toString().replace(/\d/gi, (substring) => `<span>${substring}</span>`);
    hoursVal.innerHTML = hours.toString().replace(/\d/gi, (substring) => `<span>${substring}</span>`);
    minutesVal.innerHTML = minutes.toString().replace(/\d/gi, (substring) => `<span>${substring}</span>`);
  };

  timeCount();
  setInterval(timeCount, 1000);
});