JSFiddle - React, Tailwind, and code Playground

WE ARE SORRY THE 3D IS BROKEN

by CBroe

HTML

<h1>
<span>The bloody dread&#8203;ful</span> <span class="long">Fut&#8203;ure&#8203;istic&#8203;Crap&#8203;Shit&#8203;Fest&#8203;ival</span> <span>is fin&#8203;ally Over.</span>
</h1>

<p class=s>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>

<p class=s>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>

<p class=s>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum...

CSS

* { margin:0; padding:0; }
html { margin:2.5vmax; background:url(//layoutsourcing.net/tmp/death.jpg) no-repeat fixed 65% 75%; background-size:cover; }
h1 { position:relative; margin:5vmax 0; font-size:4.25em; line-height:1; text-align:center; word-break:break-word; color:rgba(0,0,0,.75); }
h1 span { display:inline-block; line-height:.75; text-shadow:0px 1px rgba(127,127,127,.5); }
h1 span.long { padding-top:.2em; line-height:.5; }
h1:after { content:"We are sorry the 3D is broken"; position: absolute; top:50%; right:0; left:0; margin-top:-.25em; font-size:.25em; line-height:.9; font-family:verdana; text-align:center; text-transform:uppercase; color:rgba(255,255,255,0); }
h1:hover:after { -webkit-animation: 2.5s linear 1s infinite alternate message; }
h1:hover span { text-shadow:-1vmax 0 rgba(0,0,255,.5), .5vmax 0px rgba(255,0,0,.25); -webkit-animation: 1s linear 0s infinite alternate thr3d; }
p { margin:5vmax 0; font-size:2em; color:rgba(0,0,0,.9); text-shadow:0px 1px rgba(127,127,127,.95); }
p.s { color:rgba(0,0,0,1); text-shadow:0px 1px rgba(200,200,200,.75) }
@-webkit-keyframes message {
  0% { color:rgba(255,255,255,0); }
  45% { color:rgba(255,255,255,.9); }
  55% { color:rgba(255,255,255,.9); }
  100% { color:rgba(255,255,255,0); }
} 
@-webkit-keyframes thr3d { 
0% { text-shadow:-1vmax 0 rgba(0,0,255,.5), .5vmax 0 rgba(255,0,0,.25); }
9.999% { text-shadow:-1vmax 0 rgba(0,0,255,.5), .5vmax 0 rgba(255,0,0,.25); }
10% { text-shadow:-1.5vmax 0 rgba(0,0,255,.25), .25vmax 0 rgba(255,0,0,.25); }
19.999% { text-shadow:-1.5vmax 0 rgba(0,0,255,.25), .25vmax 0 rgba(255,0,0,.25); }
20% { text-shadow:-.5vmax 0 rgba(0,0,255,.5), .25vmax 0 rgba(255,0,0,.25); }
29.999% { text-shadow:-.5vmax 0 rgba(0,0,255,.75), .25vmax 0 rgba(255,0,0,.25); }
30% { text-shadow:0vmax 0 rgba(0,0,255,.35), 1.5vmax 0 rgba(255,0,0,.25); }
39.999% { text-shadow:0vmax 0 rgba(0,0,255,.85), 1.5vmax 0 rgba(255,0,0,.25); }
40% { text-shadow:-1vmax .5vmax rgba(0,0,255,.85), .75vmax 0vmax...