JSFiddle - React, Tailwind, and code Playground

by Ako Ni

HTML

<div class="post-content">
	<p style="display: none;">G  D </p>
<p>Al [G]contrario di [D]te  </p>
<p>Io[F] non lo s[A]o</p>
<p>[D] Se è g[G]iusto co[F]sì    </p>
<p>C[A]omunqu[G]e [D]sia</p>
<p>Io [G#sus]non mi mu[Fm]ovo</p>
<p>Io r[Bm]esto qu[E]i</p>
                			</div>

CSS

span.chord {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  vertical-align: bottom; /*This is mandatory to keep the text without chunk in the bottom*/
}

span.chord:before {
  content: attr(data-chord);
  position: relative;
  font-style  : italic;
  font-weight : bold;
}

JavaScript

var markUpChordLines = function() {
        jQuery('.post-content').html(function(i, html) {
          return html.replace(/\[(.*?)\]/g, '<span class="chord" data-chord="$1"></span>');
        });

        jQuery('.chord').each(function () {
          jQuery(this.nextSibling).wrapAll('<span class="lyric_content"></span>');
          jQuery(this.nextSibling).appendTo(this);
        });
};

markUpChordLines();