JSFiddle - React, Tailwind, and code Playground

by Alexx22

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;
  justify-content: space-around;
  list-style: none;
}

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

li:hover a{
  color: #FFFFFF;
}

li{
  display: flex;
  flex-grow: 1;
  text-transform: uppercase;
  border: 3px solid black;
  height: 100px;
  width: 100px;
  align-items: center;
  justify-content: center;
}

ul li a{
  color: black;
}

nav a{
  text-decoration: none;
}