JSFiddle - React, Tailwind, and code Playground

by CBroe

HTML

<div>YOU HAVE BEEN A BAD CITIZEN GO AND
HAVE YOUR BRAIN WASHED IMMEDIATELY</div>

<div><span>Y<span><span>0</span></span>U H<span>4</span>V<span>3</span> B<span>3</span><span>3</span>N <span>4</span> B<span>4</span>D C<span>1</span><span>+</span><span>1</span>Z<span>3</span>N G<span>0</span> <span>4</span>ND
H<span>4</span>V<span>3</span> Y<span>0</span>UR BR<span>4</span><span>1</span>N W<span>4</span>SH<span>3</span>D <span>1</span>MM<span>3</span>D<span>1</span><span>4</span><span>+</span><span>3</span>LY</span></div>

CSS

* { margin:0; padding:0; box-sizing:border-box; }
html, body, div { display:flex; justify-content:center; align-items:center; font-family: 'Share Tech Mono'; }
html, body { flex-direction:column; min-height:100vh; color:#eee; background:#111; }
div { position:fixed; top:0; right:0; bottom:0; left:0; white-space:pre; font-size:4vw; line-height:1; }
div + div { color:transparent; }
div + div span span { color:#333; }
@font-face {
  font-family: 'Share Tech Mono';
  font-style: normal;
  font-weight: 400;
  src: local('Share Tech Mono'), local('ShareTechMono-Regular'), url(https://fonts.gstatic.com/s/sharetechmono/v8/J7aHnp1uDWRBEqV98dVQztYldFcLowEF.woff2) format('woff2'); }