JSFiddle - React, Tailwind, and code Playground

by Christian Sonne

HTML

<nav>
  <ul>
    <li><a class="search" href="#">Google</a></li>
    <li><a class="social" href="twitter.com">Twitter</a></li>
    <li><a class="shopping" href="amazon.com">Amazon</a></li>
    <li><a class="news" href="reddit.com">Reddit</a></li>
    <li><a class="social" href="facebook.com">Facebook</a></li>
  </ul>
</nav>

CSS

ul {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
  display: inline-block;
  overflow: hidden;
  font-size: 1.3em;
  height: 2em;
  padding: 0 0.5em;
  margin: 0;
}

a {
  display: inline-block;
  color: black;
  text-shadow: 0 2em 0 currentcolor;
  line-height: 2em;
  vertical-align: center;
  height: 4em;
  transition-property: transform;
  transition-duration: .5s;
  text-decoration: none;
  text-transform: uppercase;
  transform-origin: 50% 75%;
}

a:hover, a.active {
  transform: translateY(-2em) scale(1.2);
}

.search:hover, .search.active {
  color: red;
}

.social:hover, .social.active {
  color: blue;
}

.news:hover, .news.active {
  color: rebeccapurple;
}

.shopping:hover, .shopping.active {
  color: green;
}

JavaScript

$("nav a").on("click", function() {
	$("nav .active").removeClass("active");
  $(this).addClass("active");
  return false;
});