JSFiddle - React, Tailwind, and code Playground

HTML

<p class=chameleon-hover>
   This element changes color on <b>HOVER</b>.
</p>
<p class=chameleon-click>
   This element changes color when <b>CLICKED</b>.
</p>

CSS

body {
   font-family: sans-serif;
   margin: 30px;
   }
.chameleon-hover, .chameleon-click {
   background-color: lightblue;
   transition: background-color 3s;
   padding: 20px;
   }
.chameleon-click {
   cursor: pointer;
   }
.chameleon-hover:hover, .chameleon-click.change {
   background-color: pink;
   }

JavaScript

var app = {};

app.chameleon = {
    change: function(event) {
       $(event.target).closest('.chameleon-click')
          .toggleClass('change');
       },
    setup: function() {
       $(document).on('click', '.chameleon-click', this.change);
       }
   };

app.chameleon.setup();

// Above code is modular and supports REST loaded HTML, but the
// below quick and dirty line of code will also work.
/*
$('.chameleon-click').click(
   function(event) { $(event.target).toggleClass('change'); });
*/