JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
  <ul>
    <li onmouseover="changeTo(this)" onmouseout="changeBack(this)"><a href="home.html">Home </a></li>
    <li onmouseover="changeTo(this)" onmouseout="changeBack(this)"><a href="about.html"> About </a></li>
    <li onmouseover="changeTo(this)" onmouseout="changeBack(this)"><a href="experience.html"> Experience </a></li>
    <li onmouseover="changeTo(this)" onmouseout="changeBack(this)"><a href="contact.html"> Contact </a></li>
  </ul>
</nav>
<script>
function changeTo(x) {
    x.style.backgroundColor = "red";
}

function changeBack(x) {
 	x.style.backgroundColor = "white";
}
</script>

CSS

li{background-color: white;}