JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <a href="#/"><td class="nav" width="225" onClick="home();">[Home]</td></a>
                        <td width="50"></td>
                        <a href="#/"><td class="nav" width="225" onClick="profiles();">[Profiles]</td></a>
                        <td width="50"></td>
                        <a href="#"><td class="nav" width="225" onClick="projects();">[Projects]</td></a>
                        <td width="50"></td>
                        <a href="#"><td class="nav" width="225" onClick="about();">[About]</td></a>
                        <td width="50"></td>
    </tr>
</table>
<br/>
<div onclick="change_colors();">Change Colors</div>

CSS

.nav {
    color: #00FF00 ;
    background-color: #585858 ;
    text-align: center ;
    font-size: 14px;
    font-family: Garamond, serif;
    display: block;
}

.nav_hover {
    color: #00FF00 ;
    background-color: #000000 ;
    text-align: center ;
    text-decoration: none ;
    font-size: 14px;
    display: block ;
    font-family: Garamond, serif;
}

JavaScript

window.change_colors =    function () {
 
    button_bg_color = "#000000";
    button_text_color = "#00ff00";
    hover_text_color = "#ff0000";
    hover_bg_color = "#0000ff";
    bg_color = "#fefcfa";

    $nav = $(".nav");
    $nav.css("color", button_text_color);
    $nav.css("background-color", button_bg_color);
    $nav_hover = $(".nav_hover");
    $nav_hover.css("color", hover_text_color);
    $nav_hover.css("background-color", hover_bg_color);
    $("body").css("background-color", bg_color);
     
    };

     $(document).ready(function () {
         
         $('.nav').hover(function() {
      
          $(this).removeClass('nav'); 
          $(this).addClass('nav_hover');
       }, 
       function() {
          $(this).removeClass('nav_hover'); 
          $(this).addClass('nav');
       });                         
     });