JSFiddle - React, Tailwind, and code Playground

by Ben Watts

HTML

<div class="nav-button">
  <div class="inside">Home</div>
</div>

CSS

.nav-button {
  width: 150px;
  height: 50px;
  font-size: 150%;
  background-color: #888;
}

.inside {
  text-align: center;
  vertical-align: middle;
  line-height: 50px;
}

.nav-button:hover {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
  background-color: #888;
  border-bottom: 5px solid #F92;
}