JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li><a href="/link1" class="one">Red</a></li>
  <li><a href="/link2" class="two">Blue</a></li>
  <li><a href="/link1" class="one">Square</a></li>
  <li><a href="/link3" class="three">Green</a></li>
  <li><a href="/link2" class="two">Circle</a></li>
  <li><a href="/link3" class="three">Triangle</a></li>
</ul>

CSS

li{
  display: inline;
}

JavaScript

$(".one").mouseover(function(){
  $(".one").css("color", "red");
});
$(".one").mouseout(function(){
  $(".one").css("color", "blue");
});
$(".two").mouseover(function(){
  $(".two").css("color", "red");
});
$(".two").mouseout(function(){
  $(".two").css("color", "blue");
});
$(".three").mouseover(function(){
  $(".three").css("color", "red");
});
$(".three").mouseout(function(){
  $(".three").css("color", "blue");
});