JSFiddle - React, Tailwind, and code Playground

HTML

<article>
    <h1>
       Generating a password with CSS
    </h1>
    <p>
       <strong>
         This should never be used in production, it is not accessible and just a silly experiment!
       </strong>
    </p>
    <p>
       To generate a password click on the boxes below. To start the randomiser again just click again.
    </p>
    <input type="checkbox" id="card_02" checked>
    <label for="card_02">
      <output>
        <span class="number u9"></span>
        <span class="number u8"></span>
        <span class="number u7"></span>
        <span class="number u6"></span>
        <span class="number u5"></span>
        <span class="number u4"></span>
        <span class="number u3"></span>
        <span class="number u2"></span>
        <span class="number u1"></span>
        <span class="number u0"></span>
      </output>
      </label>
    </article>
   
   
   <div id="outputGen">
      
   </div>

CSS

html, body {
  --size: 2rem;
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: Palatino, Helvetica, arial, sans-serif;
  /*overflow: hidden;*/
}


output {
  display: flex;
  justify-content: center;
}

output span {
  font-family: monospace, monospace;
  color: white;
  background: black;
  position: relative;
  z-index: 2;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
  animation: show 0.125s linear 1;
  animation-fill-mode: forwards;
  font-size: var(--size);
  height: calc(var(--size) * 1.5);
  line-height: calc(var(--size) * 1.5);
  border-radius: 0.25rem;
  width: 0;
  margin: 0;
}

@keyframes show {
  100% { 
    width: var(--size); 
    margin: calc(var(--size) * 0.0625);
  }
}


output span.symbol {
  display: inline-block;
}

@keyframes animate {
100.0000%{transform: translateY(-100.0000%);}
}

span.number::before {
  content: "A\A y\A G\A Z\A 0\A 3\A W\A j\A 1\A r\A Y\A J\A k\A D\A l\A d\A X\A U\A R\A a\A H\A g\A f\A 6\A v\A 7\A L\A x\A z\A I\A 5\A Q\A c\A 4\A 2\A n\A C\A N\A u\A T\A v\A q\A w\A t\A B\A s\A p\A V\A m\A K\A i\A O\A P\A h\A 8\A o\A S\A 9\A E\A F\A e\A M\A";
  
  animation: animate 0.0002s steps(62) infinite;
  position: absolute;
  top: 0;
  left: 0;
  animation-play-state: paused;
}

span.u0::before { animation-duration: 0.00173454s; }
span.u1::before { animation-duration: 0.00148639s; }
span.u2::before { animation-duration: 0.00217324s; }
span.u3::before { animation-duration: 0.00194568s; }
span.u4::before { animation-duration: 0.00227657s; }
span.u5::before { animation-duration: 0.00315454s; }
span.u6::before { animation-duration: 0.00293465s; }
span.u7::before { animation-duration: 0.00104548s; }
span.u8::before { animation-duration: 0.00373451s; }
span.u8::before { animation-duration: 0.00245781s; }

input {opacity: 0.001}
input:checked + label span.number::before {
  animation-play-state: running;
}