JSFiddle - React, Tailwind, and code Playground

HTML

<h1 id="next">next</h1>
<h1 id="back">back</h1>
<h2 class="foo">foo1</h2>
<h2 class="foo">foo2</h2>

CSS

#next.highlighted {
  background: lightgreen;
}

#back.highlighted {
  background: red;
}

.foo.highlighted {
  background: tomato;
}

JavaScript

document.querySelectorAll('h1, h2')
  .forEach(el => el.addEventListener('click', highlight));

function highlight() {
  this.classList.add('highlighted');
  setTimeout(() => {
    this.classList.remove('highlighted');
  }, 500);
}