JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" id="random">
<label class="box" for="random"></label>

CSS

@property --n1{
  syntax: '<integer>';
  inherits: false;
  initial-value: calc(27*(1 + 26*26));
}
@property --n2{
  syntax: '<integer>';
  inherits: false;
  initial-value: calc(27*(1 + 26*26));
}

.box {
  --c:black; /* color */
  --s:0.5ch; /* space between numbers */
  --b:10px;  /* transparent border*/
  
  counter-set:n1 var(--n1) n2 var(--n2);

  display: table;
  margin:20px auto;
  font-size: 100px;
  letter-spacing: var(--s);
  font-family: monospace;
  color: #fff;
  background: 
    repeating-linear-gradient(to right, var(--c) 0 calc(1ch + var(--s) - var(--b)), transparent 0 calc(1ch + var(--s)))
    0 0/calc(100% - var(--s)/2 - 1px) 100% no-repeat;
  padding-left: calc((var(--s) - var(--b))/2);
  transform:translateX(calc(var(--s)/3)); /* rectify the centring */
  animation:0.2s infinite linear;
  animation-name:n1,n2;
  animation-duration:0.1s,0.08s;
}

.box::before {
  content: counter(n1,upper-alpha) counter(n2,upper-alpha)
}

@keyframes n1{to{--n1:calc(27*26*(1 + 26*26))}}
@keyframes n2{to{--n2:calc(27*26*(1 + 26*26))}}

input {opacity: 0.001}
input:checked + label {
  animation-play-state: paused;
}