JSFiddle - React, Tailwind, and code Playground

by Sahin Deniz

HTML

<div id="ex1">
  <h2>Transition Color</h2>
  <h4>Text:</h4>
  <p>Church-key seitan listicle locavore, mixtape biodiesel readymade crucifix health goth flexitarian direct trade mlkshk iPhone. Banjo tote bag readymade +1 skateboard deep v. Mixtape cred readymade gentrify. Banh mi keytar butcher, skateboard knausgaard </p>
</div>

CSS

div#ex1{width:300px; padding:0px 10px 10px; margin-bottom:10px;}
div#ex1:hover{cursor:pointer;}
div#ex1 h2{border-bottom:double 3px black; text-align:center; padding: 5px 0; margin: auto -10px;}
div#ex1 p{text-indent:5px;}

JavaScript

function chColor(tar) {
  let r = 0;
  let g = 255;
  let b = 0;
  let counter = setInterval(() => {
    console.log('This is running', r, g, b, `rgb(${r},${g},${b})`);
    r += 15;
    b += 15;
    if (r >= 255)
      clearInterval(counter);
      
    tar.style.backgroundColor = `rgb(${r},${g},${b})`;
  }, 30);
}

document.getElementById('ex1').addEventListener('mouseenter', function(e) {
  var tar = this;
  chColor(tar)
}, false);