JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" id="blue">Blue</a><br>
      <a href="#" id="yellow">Yellow</a><br>
      <a href="#" id="green">Green</a>
     <div id="gradient"></div>

CSS

body {
   padding: 0;
   margin: 0;
}

#gradient {
  width: 100%;
  height: 800px;
  padding: 0;
  margin: 0;
  background-color: deeppink;
  background-image: linear-gradient( white, rgba(255,255,255,0));
  transition: background-color 1s;
}

#blue:hover ~ #gradient {
     background-color: blue;
}

#yellow:hover ~ #gradient {
     background-color: yellow;
}

#green:hover ~ #gradient {
     background-color: red;
}