JSFiddle - React, Tailwind, and code Playground

by mrnobody

HTML

<nav class="nav">
  <a href="#link" class="nav-item">1</a>
  <a href="#link" class="nav-item">2</a>
  <a href="#link" class="nav-item">3</a>
  <a href="#link" class="nav-item">4</a>
  <a href="#link" class="nav-item">5</a>
  <a href="#link" class="nav-item">6</a>
</nav>

CSS

.nav {
  margin-top: 5em;
  display: table;
  width: 100%;
  border-collapse: collapse;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.nav-item {
  color: #2AABE4;
  display: table-cell;
  text-align: center;
  border: 3px dashed #000;
  text-decoration: none;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

.nav-item:hover {
  background-color: #2AABE4;
  color: #fff;
}