JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
<li><a href="" class="navigation">Home</a></li>
<li><a href="" class="navigation">Technology</a></li>
<li><a href="" class="navigation">Company</a></li>
<li><a href="" class="navigation">Support</a></li>
<li><a href="" class="navigation">Network</a></li>
</ul>

CSS

li {
  display: inline-block;
  margin-right: 15px;
  float: left;
  list-style: none;
}
.navigation {
  font-size: 16px;
  color: black;
  transition: text-shadow 1s;
  text-decoration: none;
  text-transform: uppercase;
  font-family: "Verdana";
  }

a:hover {
  text-shadow: 1px 0px #000;  
}