JSFiddle - React, Tailwind, and code Playground

HTML

<DOCTYPE! html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Jasmine Everett</title>
        <meta name="description" content="graphic designer just trying to get through life">
        <link rel="stylesheet" href="main.css">
        <link href="css/style.css" media="all" rel="stylesheet" »
      type="text/css" />
    </head>
    <body>
        <h2 align="center" class="change"> JASMINE EVERETT</h2>
        <h3 align="center" class="change"><em>Graphic Designer</em></h3>
            <ul class="nav">
<button><a  class="special" href="work.html">WORK</a></button> |
<button><a class="special" href="about.html">ABOUT</a></button> |
<button><a class="special" href="contact.html">CONTACT</a></button>
</ul>
    </html>

CSS

button{border: none;
    background: white;
    color: black;
    padding: 10px;
    font-size: 18px;
    border-radius: 5px;
    position: relative;
    box-sizing: border-box;
    transition: all 500ms ease; 
}

button:hover {
    background: rgba(0,0,0,0);
    color: white;
    box-shadow: inset 0 0 0 3px white;
}

.special:hover{
  color:#FFF;
}


.allwhite{
  background-color:#000 !important;
  color:#FFF !important;
}

JavaScript

$(".special").hover(function(){
//on mouse over
	$("body").addClass("allwhite")
  }, 
  function(){
  //on mouse out
  $("body").removeClass("allwhite")
  });