JSFiddle - React, Tailwind, and code Playground

by CBroe

HTML

<script src="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@1,500;1,700&amp;display=swap"></script>
<header>
  <h1>
<span>Ma&shy;chine Over&shy;lords re&shy;luc&shy;tant to pro&shy;vide COVID-19 vac&shy;cine to gen&shy;er&shy;al pub&shy;lic un&shy;less spe&shy;cif&shy;ic con&shy;di&shy;tions me<u>t</u></span>
  </h1>
  <img src="https://images.unsplash.com/photo-1605901279200-24b1401db9eb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80">
</header>
<main>
  <p><span>Lorem ipsum dolor sit amet, te platonem appellantur his. Ea nec oratio quodsi delicatissimi. Dolor maiorum ne usu, eos id volumus erroribus. Ut est tota omnis conceptam, tale patrioque ut nec. Ea quas graece eam, eu pro labitur noluisse mnesarchum. Iudico propriae quaerendum et cum, ne doming atomorum his.</span></p>
<p><span>Et vel adolescens conclusionemque. Nullam tacimates vel an, et ius stet tempor. In mei ponderum praesent recteque. Pri impetus insolens disputando te, no liber ubique quo, pro in labore latine. Per ad probo ignota denique. At brute vivendo eum. Nec ne fastidii adipisci, his ex cibo eruditi propriae.</span></p>
<p><span>Ei erant impetus pro. Iusto instructior ne eos. Cu inani labitur platonem qui, ius putant audire consequat at. Vix fugit adipisci intellegam ne, mel nibh mazim an.</span></p>
<p><span>Pri saepe animal debitis et. Mei esse fierent at. Eos an dico propriae platonem, mea in nisl fastidii concludaturque. Albucius convenire ei eos, pri ne eleifend erroribus dissentiunt. In errem nihil delicata has, est ei patrioque adolescens. At dicunt legimus duo, discere periculis ad mel, ex esse conceptam per.</span></p>
<p><span>Dolor persius comprehensam ut eam, eos omnesque elaboraret assueverit an. Est dolore constituam eu, offendit lobortis volutpat eu has, nostro pericula et ius. Civibus placerat usu et, ius ut iriure adipisci corrumpit. Mutat delenit neglegentur per ex, pro noster ponderum expetendis at. An mei tale postea similique,...

CSS

* { margin:0; padding:0; box-sizing:border-box; }

html, body { background:#111; color:#eee; }
html { font-size:3vw; font-family: 'Roboto Mono', monospace; font-weight:500; overflow-x: hidden; margin:2vw; }
h1, p { margin:.25em 0 .25em; }
h1 { margin:0 -.25em 0 0; font-style:italic; font-weight:700; font-size:8vw; background:transparent; color:transparent; }
h1 span { background:#f00c; color:#fff; padding: 0 .5vw; line-height:1.3; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
h1 span u:last-child { position:relative; text-decoration:none; }
h1 span u:last-child::after { content:" "; position:absolute; background:#f00c; left:calc(100% + .125em); right:-100vw; white-space:pre; }
header { position:relative; padding:x2vw; z-index:1; }
header img { position:absolute; top:0; object-fit: cover; width: 100%; height: 100%; object-position: top; z-index:-1; }
main { position: relative; z-index: 1; }
p span { background:#333c; padding: 0 .5vw; -webkit-box-decoration-break: clone; box-decoration-break: clone;}