JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tbi-phone-verification-loader">
              <h1 class="tbi-h1 tbi-phone-verification-loader-text">
              </h1>
              <div>
              </div>
              <div>
              </div>
              <div>
              </div>
              <div>
              </div>
              <div>
              </div>
              <div>
              </div>
              <div>
              </div>
              <div>
              </div>
              <div>
              </div>
              <div>
              </div>
              <div>
              </div>
              <div>
              </div>
              <div>
              </div>
              <div>
              </div>
              <div>
              </div>
              <div>
              </div>
              <div>
              </div>
              <div>
              </div>
              <div>
              </div>
              <div>
              </div>
              <div>
              </div>
              <div>
              </div>
              <div>
              </div>
              <div>
              </div>
              <div>
              </div>
              <div>
              </div>
              <div>
              </div>
              <div>
              </div>
              <div>
              </div>
              <div>
              </div>
            </div>

CSS

.tbi-phone-verification-loader {
  display: inline-block;
  position: relative;
  width: 243.01px;
  height: 242.08px;
}
.tbi-phone-verification-loader div {
  position: absolute;
  width: 6px;
  height: 6px;
  background: #CECECE;
  border-radius: 50%;
  animation: tbi-phone-verification-loader 3.0s linear infinite;
}

.tbi-phone-verification-loader div:nth-child(1) {
  animation-delay: 0s;
  top: 164.07px;
  left: 228.51px;
}
.tbi-phone-verification-loader div:nth-child(2) {
  animation-delay: -0.1s;
  top: 166.51px;
  left: 250.42px;
}
.tbi-phone-verification-loader div:nth-child(3) {
  animation-delay: -0.2s;
  top: 173.73px;
  left: 272.06px;
}
.tbi-phone-verification-loader div:nth-child(4) {
  animation-delay: -0.3s;
  top: 184.81px;
  left: 290.83px;
}
.tbi-phone-verification-loader div:nth-child(5) {
  animation-delay: -0.4s;
  top: 199.72px;
  left: 307.15px;
}
.tbi-phone-verification-loader div:nth-child(6) {
  animation-delay: -0.5s;
  top: 218.28px;
  left: 320.39px;
}
.tbi-phone-verification-loader div:nth-child(7) {
  animation-delay: -0.6s;
  top: 238.78px;
  left: 329.25px;
}
.tbi-phone-verification-loader div:nth-child(8) {
  animation-delay: -0.7s;
  top: 259.88px;
  left: 333.53px;
}
.tbi-phone-verification-loader div:nth-child(9) {
  animation-delay: -0.8s;
  top: 281.57px;
  left: 333.43px;
}
.tbi-phone-verification-loader div:nth-child(10) {
  animation-delay: -0.9s;
  top: 303.13px;
  left: 328.87px;
}
.tbi-phone-verification-loader div:nth-child(11) {
  animation-delay: -1s;
  top: 320.57px;
  left: 317.47px;
}
.tbi-phone-verification-loader div:nth-child(12) {
  animation-delay: -1.1s;
  top: 341.52px;
  left: 306.7px;
}
.tbi-phone-verification-loader div:nth-child(13) {
  animation-delay: -1.2s;
  top: 356.26px;
  left: 290.34px;
}
.tbi-phone-verification-loader div:nth-child(14) {
  animation-delay: -1.3s;
  top: 367.37px;
  left: 271.21px;
}
.tbi-phone-verification-loader div:nth-child(15) {
  animation-delay: -1.4s;
  top: 374.21px;
...

JavaScript

const TIME_LIMIT = 300;
    let timePassed = 0;
    let timeLeft = TIME_LIMIT;
    let timerInterval = null;

    var loaderTextElement = $('.tbi-phone-verification-loader-text');
    loaderTextElement.replaceWith(`<h1 class="tbi-h1 tbi-phone-verification-loader-text"><span id="base-timer-label" class="tbi-h1 text-gray-90">${formatTime(timeLeft)}</span></h1>`);
    
    startTimer();

    function startTimer() {
        timerInterval = setInterval(() => {
        timePassed = timePassed += 1;
        timeLeft = TIME_LIMIT - timePassed;
        document.getElementById("base-timer-label").innerHTML = formatTime(timeLeft);
        // var formattedTimeLabel = $('.base-timer__label').html();
        // formattedTimeLabel.replaceWith(`${formatTime(timeLeft)}`);

        //  if (timeLeft === 0) {
        //     onTimesUp();
        //     }
        }, 1000);
    }
    
    function formatTime(time) {
  const minutes = Math.floor(time / 60);
  let seconds = time % 60;

  if (seconds < 10) {
    seconds = `0${seconds}`;
  }

  return `${minutes}:${seconds}`;
}