JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="listings">
  <li class="layer block color-blue" id="item-1">Blue</li>
  <li class="layer block color-red" id="item-2">Red</li>
  <li class="layer block color-green" id="item-3">Green</li>
</ul>

CSS

.color-blue { color: blue; }
.color-red { color: red; }
.color-green { color: green; }

JavaScript

/* Click listener */
document.getElementById("listings").addEventListener("click", function(e) {
  var classes = e.target.getAttribute('class').split(' ');
  for (var i=0;i<classes.length;i++)
  {
      if (classes[i].match(/^color/g) !== null)
          alert(classes[i].replace('color-', ''));
  }
});