JSFiddle - React, Tailwind, and code Playground

HTML

<div></div>
<div></div>
<div class="newmessage"></div>

CSS

div {
    background-color: gray;
    height: 50px;
    width: 200px;
    margin-bottom: 5px;
}
.newmessage {
  background-color: rgba(220, 55, 55, 1);
  -webkit-transition: background-color 2s ease-out;
  -moz-transition: background-color 2s ease-out;
  transition: background-color 2s ease-out;
}
.newmessage.hovered {
  background-color: rgba(220, 55, 55, 0);
}

JavaScript

var newMessages = document.querySelectorAll('.newmessage');

for (var i = 0, l = newMessages.length; i < l; i++) {
    newMessages[i].addEventListener('mouseover', function() {
        this.classList.add('hovered');
    });
}