JSFiddle - React, Tailwind, and code Playground

HTML

<a id='colorDummy' href="#">Color changes (Without CSS3)</a>
<br/>
<br/>
<a id='color' href="#">Color changes smoothly</a>

CSS

body {
  font-family: Calibri;
  font-size: 16px;
}

a {
  text-decoration: none;
}

#color:hover {
  transition: color .9s ease;
  color: purple;
}

#colorDummy:hover {
  color: purple;
}