JSFiddle - React, Tailwind, and code Playground

by emturano

HTML

<div id="wrapper" contenteditable="true" spellcheck="false">
  <p>Where</p>
  <p>are the</p>
  <p>trees</p>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:bold);

/* Global ------------------------------------------------------ */

html {
  height: 100%;
  font: 62.5%/1 "Lucida Sans Unicode","Lucida Grande",Verdana,Arial,Helvetica,sans-serif;
  background: url(http://s.cdpn.io/79/glow.png) no-repeat center center,
    url(http://s.cdpn.io/79/tilt-shift.jpg) no-repeat center center;
  background-size: auto, cover;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  background-color: hsla(30,20%,95%,.9);
}


/* Wrapper ------------------------------------------------------ */

#wrapper {
  position: relative;
  text-align: center;
  font-weight: bold;
  font-family: "Yanone Kaffeesatz", "Lucida Grande", Lucida, Verdana, sans-serif;
  margin: 0 auto;
  width: 600px;
  padding: 7em 0;
  background: url(http://s.cdpn.io/79/tilt-shift.jpg) no-repeat center center;
  border-radius: 4px;
  box-shadow: inset 0 -1px 0  hsla(0,0%,0%,.2), 0 21px 8px -12px rgba(0,0,0,.2);
  perspective: 350;
}

#wrapper:focus {
  outline: none;
}


#wrapper p {
  font-size: 10em;
  margin: 0;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-shadow: rgba(0,0,0,0.1) 0 20px 80px;
  -webkit-transition: -webkit-transform .1s ease-in; /* only WebKit because of performance */
}


/* Hover ------------------------------------------------------ */

#wrapper:hover p {
  color: hsla(0,0%,0%,0);
  transform: rotate(6.5deg) rotateX(28deg) skewX(-4deg);
  -webkit-transition: -webkit-transform .1s ease-out; /* only WebKit because of performance */
}

#wrapper:hover p:nth-child(1) {
  font-size: 9em;
  text-shadow: #fff 0 0 10px, 
    #fff 0 4px 3px, #ddd 0 9px 3px,  #ccc 0 12px 1px, 
    rgba(0,0,0,0.2) 0 14px 5px, rgba(0,0,0,0.1) 0 20px 10px,
    rgba(0,0,100,0.2) 0 15px 80px;
  text-indent: 0.3em;
}

#wrapper:hover p:nth-child(2) {
  font-size: 10em;
  text-shadow: #fff...