JSFiddle - React, Tailwind, and code Playground

HTML

<span class="class1"><p>text2</p><p>text3</p><p>text4</p></span> text
<span class="class2"><p>text2</p><p>text3</p><p>text4</p></span>
<span class="class3"><p>text2</p><p>text3</p><p>text4</p></span>

CSS

.class1 {
  color: red
}

.class2 {
color: green
}

.class3 {
color: blue
}

JavaScript

var paras = [].slice.call(document.querySelectorAll('span')).forEach(function (el) {
    el.onclick = showParentInfo;
});

function showParentInfo() {
    console.log(this.nodeName + '=' + this.className)
}