JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/ui-lightness/jquery-ui.css">
<h1 class="typehead">The Zines</h1>
<h1 class="typehead">2nd h1 tag</h1>

CSS

h1 {
    font-size: 150%;
}
.brokenType {
    left: -1px;
    top: -1px;
    color: red;
    position:relative;
}

JavaScript

function randomXToY(minVal,maxVal,floatVal){
 var randVal = minVal+(Math.random()*(maxVal-minVal));
 return typeof floatVal=='undefined'?Math.round(randVal):randVal.toFixed(floatVal);
}

$('.typehead').each(function() {                  
 //access the text and characters within the tag with the id typehead 
 var exploded = $(this).text().split('');
 var rdmltr = randomXToY(0,exploded.length);

 // Make sure we don't get a space character or undefined
 while(exploded[rdmltr] == ' ' || exploded[rdmltr] == undefined) {
  rdmltr = randomXToY(0,exploded.length);
 }

 // Wrap the letter with a span that has the new class brokenType
 //   and update it in the array
 exploded[rdmltr] = '<span class="brokenType">' + exploded[rdmltr] + '</span>'; 

 // Update the content
 $(this).html(exploded.join(''));
});