JSFiddle - React, Tailwind, and code Playground

HTML

<a href="">zzzzz</a>

CSS

a {
  background-image: linear-gradient(to bottom, 
    blue 0px,
    yellow 55px,
    green 55px,
    orange 100%
  );
  background-position: 0px 0px;
  transition: background-position 1000ms linear;
  padding: 2em;
}

a:hover {
  background-position: 0px 30px;
}