JSFiddle - React, Tailwind, and code Playground

by Simon Hi

HTML

<header>
  <nav>
    <ul>
      <li><a href="">Home</a></li>
      <li><a href="">About us</a></li>
      <li><a href="">Products</a></li>
      <li><a href="">Service</a></li>
      <li><a href="">Contact</a></li>
    </ul>
  </nav>
</header>

CSS

ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  flex: 1;
  display: flex;
  margin: 0;
  padding: 0;
  height: 100px;
  min-width: 100px;
}

ul li a {
  display: block;
  margin: auto;
}

li:nth-of-type(1) {
  background: #ff1717;
}

li:nth-of-type(2) {
  background: #38b7ff;
}

li:nth-of-type(3) {
  background: #5ed958;
}

li:nth-of-type(4) {
  background: #8c53ff;
}

li:nth-of-type(5) {
  background: #ffde59;
}

li:hover {
  background-color: rgb(145, 49, 49);
}

li:hover a {
  color: #FFFFFF;
}

nav a {
  text-decoration: none;
  color: black;
  text-transform: uppercase;
}