JSFiddle - React, Tailwind, and code Playground

0fox2give

by CBroe

HTML

<h1>for reasons beyond my understanding and control i have not been invited to a single british gentlemens hunt yet so you can imagine the number of fox i have to give</h1>

CSS

* { margin:0; padding:0; }
html, body { background:#111; }
h1 { display:flex; flex-wrap:wrap; font-size:2.5em; font-family:"lucida console", monospace; text-transform:uppercase; }
i, u, b, x { font-style:normal; font-weight:inherit; text-decoration:none; }
i { color:#ccc; }
u { color:#999; }
b { color:#333; }
x { color:#666; }

JavaScript

var h = document.querySelector('h1'), w = h.innerHTML.split(/\s/), e = 'i.b.u.x'.split('.');

for(var i=0, l=w.length; i<l; ++i) {
j=i+2;
  w[i] = w[i].replace(/(.)/g, '<'+e[j%e.length]+'>$1</'+e[j%e.length]+'>');
}

h.innerHTML = w.join('');