JSFiddle - React, Tailwind, and code Playground

normal

by CBroe

HTML

<div><span>c</span>uck</div>
<div>f<span>apitalism</span></div>
<!--br>
<div>c<span>uck</span></div>
<div><span>f</span>apitalism</div-->

CSS

* { margin:0; padding:0; box-sizing:border-box; }
html, body, ul { 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 { font-size:10vw; width:6em; line-height:1; }
div span { display:inline-block; padding:.2em 0 .1em; color:#111; background:#eee; }
@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'); }

JavaScript

document.onclick = function() { document.documentElement.classList.toggle('r') }