JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html> 
<title>Foo</title>
<h1 id="h1">LETTERING.JS</h1>
<style>
/* shamelessly borrowed from lettering.js */
h1{font-weight: normal;text-transform:uppercase;font-family:'HelveticaNeue-Bold','League Gothic','Impact',sans-serif;font-size:160px;margin-bottom:-32px;margin-left:10px;color:#c44032;text-shadow:#863027 -4px 4px 0;margin-top:30px;}
h1 span{display:inline-block;position:relative;letter-spacing:-1px;-webkit-transition:all 0.2s ease-out;}
h1 span:hover{top:3px}
h1 .char2, h1 .char11{color:#e36b23;text-shadow:#9b4d1f -4px 4px 0}
h1 .char3, h1 .char10{z-index:10;color:#e6c92e;text-shadow:#9c8b26 -4px 4px 0}
h1 .char4, h1 .char9{color:#5da028;text-shadow:#427021 -4px 4px 0}
h1 .char5, h1 .char8{color:#4584be;text-shadow:#2f597f -4px 4px 0}
h1 .char6, h1 .char7{color:#7073cf;text-shadow:#4a4d88 -4px 4px 0}
h1 .char1{-webkit-transform:rotate(-3deg)}
h1 .char3{top:-1px;-webkit-transform:rotate(2deg)}
h1 .char4{top:-7px}
h1 .char6{top:-7px;-webkit-transform:rotate(2deg)}
h1 .char7{}
h1 .char8{top:1px;-webkit-transform:rotate(-2deg)}
h1 .char9{-webkit-transform:rotate(2deg)}
h1 .char10{top:-65px;width:36px;}
h1 .char10:hover{-webkit-transition-duration:0.4s;}
h1 .char11{top:2px;left:-30px;width:50px;-webkit-transform:rotate(-3deg)}
h1 .char12{left:-24px}
</style>
<script>
  var lettering = function(a,b,c,d){c=0,a.innerHTML=a.textContent.replace(b||/\S/g,function(d){return'<span class=char'+(++c)+'>'+d+'</span>'})}

  lettering(document.getElementById('h1'))
</script>