JSFiddle - React, Tailwind, and code Playground

by bubu

HTML

<div id="test3" contenteditable="true"><h2>Editable, type something...</h2>
<p>Ho<span title="E/G#">san</span><span title="A">na</span>, ho<span title="B">san</span><span title="C#m">na</span>, Ho<span title="A">san</span>na in the <span title="C#m">high</span><span title="B">est</span></p>
<p>Ho<span title="E/G#">san</span><span title="A">na</span>, ho<span title="B">san</span><span title="C#m">na</span>, Ho<span title="A">san</span>na in the <span title="C#m">high</span><span title="B">est</span></p>
</div>

CSS

/* Scripting */
#test3 p > span.chordbox {
    display: inline-block;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAGCAYAAAAc2cSCAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3AwEFRkZBjxs4QAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAABJSURBVBjTY/j/79v/Z7cf/f/05/9/BiggVozh6WLn/2wMDP+1m6/+//kfIkGsGBOHqAKDJIswg4IMDwMTA0MRAwMDA7FiQxQAANecRNNXT9NzAAAAAElFTkSuQmCC) repeat-x right bottom;
}
#test3 p > span.chordbox > span:first-child {
    display: block;
    text-align: center;
    color: red;
    font-family: sans-serif;
    margin-bottom: -.3em;
}
#test3 p > span.chordbox > span:last-child {
    display: inline-block;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAGCAYAAAAc2cSCAAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3AwEFRk1NOQAAgAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAAXSURBVBjTY/z///9/BjIBEwMFYCRqBgCynwQIlIu08QAAAABJRU5ErkJggg==) repeat-x right bottom;
}

JavaScript

$("#test3 p > span[title]").replaceWith(function() {
    return '<span class="chordbox"><span>'+ $(this).attr('title') +'</span><span>'+ $(this).text() +'</span></span>'
});