JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
  <a href="">Home</a>
  <a href="#about">About</a>
  <a href="#portfolio">Work</a>
  <a href="#testimonials">Blog</a>
  <a href="#contact">Contact</a>
</nav>

CSS

body {
  background: #87509c;
}

nav {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  margin-top: 20px;
  align-content: center;
  justify-items: center;
}

nav a {
  background: transparent;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  padding: 5px 15px;
  margin-left: 5px;
  border-radius: 3px;
}

nav a:hover {
  background: #643a79;
}

a:first-child {
  grid-column-start: 1;
  grid-column-end: 3;
}

a:nth-child(2n) {
  grid-column-start: 3;
  grid-column-end: 5;
}

a:nth-child(3n) {
  grid-column-start: 5;
  grid-column-end: 7;
}

a:nth-child(4n) {
  grid-column-start: 2;
  grid-column-end: 4;
}

a:last-child {
  grid-column-start: 4;
  grid-column-end: 6;
}