JSFiddle - React, Tailwind, and code Playground

by stecb

HTML

<h3 class="head"><span class="heading">THE NEXT GENERATION OF CREATIVE TALENT</span></h3>
<h3 class="sub"><span class="subhead">IT'S RIGHT HERE</span></h3>

CSS

h3 {
    margin:0;
    font-size: 42px;
}
h3.head{
    border-left:10px solid #000;
}
h3.sub{
    border-left:10px solid #00a3d0;
}
h3 .heading {
    background-color: #000;
    color: #00a3d0;
    padding:1px;
    padding-right:10px;
}
h3 .subhead {
    background-color: #00a3d0;
    color: #000;
    padding:1px;
    padding-right:10px;
}

JavaScript

$$('h3 span').each(function(el){
    var parentRef = el.getParent();
    var textLetters = el.get('text');
    el.destroy();
    var spanParent = new Element('span',{'class':el.className});
    for(var i = 0; i<textLetters.length;i++){
        var span = new Element('span');
        span.set('text',textLetters.charAt(i));
        span.inject(spanParent);
    }
    spanParent.inject(parentRef);
    spanParent.getElements('span').each(function(sp){
        if(sp.getPrevious() && sp.offsetTop > sp.getPrevious().offsetTop)
            sp.getPrevious().setStyle('padding-right','10px');
    });
});