JSFiddle - React, Tailwind, and code Playground
by CBroe
HTML
<h1>Lorem Ipsum,
Dolor sit Achmet,
Ploink hinks rstf</h1>
<p>
Lorem ipsum dolor sit amet, alii nemore periculis ex nam. Qui platonem honestatis ex, ne nam choro vocent alterum. Eam latine labitur rationibus id. At quo numquam definitiones. Suavitate corrumpit assueverit mei eu.</p>
<p>Homero graeci melius pri an, vim et sanctus meliore. Vel nonumy quaestio posidonium ea, per ne diam rebum mediocrem. Modo munere ocurreret id cum, nam platonem ocurreret an. Ea pri vocent diceret, ne pri omnes labitur noluisse.
</p>
<p>
Nam nulla ubique argumentum ad. Nam tollit appellantur ea. Nobis omnium doctus ei has. Causae omittam accumsan eu eam, in duo aperiam eloquentiam appellantur. Eos ut erant impetus singulis, per ea putent corrumpit. Ex nam minim fuisset voluptua, facilisi constituto sed eu. Alii corpora et vim, in cum populo civibus.
</p>
<p>
Mel ea singulis accommodare, sint omnium elaboraret sea ei. Et mel neglegentur delicatissimi, an his aliquid legimus, ex atqui epicuri erroribus mel. Ut error laoreet mea, apeirian reformidans ne eum, accumsan scribentur definitionem vis no. No choro erroribus his, homero tempor ad duo, soluta petentium cu vim. Tale graeco equidem nam no, ad ius stet noluisse electram, nisl agam suscipit in pri. Sea et prima fuisset, cu sed mazim assueverit persequeris, ad eum commodo laoreet persequeris.
</p>
<p>
Everti accusam recusabo has ei. Quo te unum illud mucius, suscipit vulputate ullamcorper qui in, nec ei populo docendi. In aliquip copiosae menandri eos. Eu qui fuisset imperdiet, cum ad quem homero fierent, viderer minimum sadipscing ne pri. Vix dicat dolore vivendum ex, et adhuc posidonium cum. Quo eu possit intellegat, mea ne option hendrerit, ad sint docendi singulis his.
</p>CSS
html { background:#339 url(https://unsplash.com/photos/xUxjNBu0ZDc/download?force=false&w=1920) bottom fixed; xbackground:url(https://i-download.imgflip.com/4h8q5f.gif) fixed; background-size:cover; xbackground:red; }
body { margin:0; padding:2vh; background:none; }
h1 { white-space:pre; margin:0; margin-bottom:4vh; xpadding:2vw; font-size:8.25vw; font-family:"lucida console", monospace; font-weight:bold; line-height:1; background:linear-gradient(180deg, #000f 0%, #000e 75%, #0000 100%); background:#000d; color:#fff; mix-blend-mode:darken; display:flex; min-height:96vh; justify-content:center; align-items:center; xtext-shadow:.5vw 0 .25vw #f006; }
p { display:inline; background:#0009; color:#fff9; font-size:2rem; line-height:1.5; padding:.25vw 1vw; -webkit-box-decoration-break:clone; box-decoration-break:clone; outline:1px solid #0009; outline-offset:2px; }
p::after { content:""; display:block; }