JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">`
   <div class="navbar">
      <nav>
         <ul>
            <li><a href="#">Home</a></li>
            <li><a class='about button' href="#">About</a></li>
            <li><a href="#">Pictures</a></li>
         </ul>
       </nav>
    </div>

    <div class="logo">
       <h1 class='about title'>TITLE PAGE</h1>
    </div>
</div>

CSS

h1.about.active{
  color: red
}

JavaScript

var aboutButton = document.getElementsByClassName('about button')[0];
var aboutTitle = document.getElementsByClassName('about title')[0];

function aboutHover(){
  aboutTitle.classList.add('active');
}

function aboutLeave(){
  aboutTitle.classList.remove('active');
}

aboutButton.addEventListener('mouseover', aboutHover);
aboutButton.addEventListener('mouseout', aboutLeave);