JSFiddle - React, Tailwind, and code Playground

HTML

<hgroup>
  <hgroup class="myself">
    <h1>Hi, I’m Matthew.</h1>
    <h2>I design & develop</h2>
    <h3>for <span class="hover-spell">ecneirepxe</span>.</h3>
	 </hgroup>

CSS

html, body{height: 100%; background:#40befb;margin:0; padding:0;}
h1{padding-top: 32px;}
h1,h2,h3{font-family: 'Merriweather', serif; margin: 0; padding-left:32px; font-size: 72px; color: #fff;}

.hover-spell
  {
    cursor: pointer;
    border-bottom: 1px dotted lighten(#40befb, 33%);
  }

JavaScript

$(function() {
    var expElem = $(".hover-spell");
    var exp = expElem.text();
    var run = false;
    
    expElem.empty();
    for(var i = 0; i <= exp.length; i++) {
       expElem.append('<span>'+exp.charAt(i)+'</span>'); 
    }
    
    expElem.mouseover(function() {   
        if(run === true) return false;
        run = true;
        var stepDuration = 300;
        var counter = 0;
     
        (function anim(){
            if(counter == exp.length-1) return false;
             counter++;
            
            var nth = exp.length;
            var elem = $('span:nth-child('+nth+')', expElem); 
           
            elem.slideUp(stepDuration, function() {
                (function() {
                    if(counter == 1) return elem.prependTo(expElem);
                    else return elem.insertAfter($('span:nth-child('+(counter-1)+')', expElem));
                })().slideDown(stepDuration, anim);
            });
        })();   
    });  
});