JSFiddle - React, Tailwind, and code Playground

by smilingpigs

HTML

<nav>
  <ul>
  <li><a>Home</a></li>
  <li><a>About</a></li>
  <li><a>Contact</a></li>
  </ul>
</nav>

CSS

nav
{
text-align: center;
margin: 0;
overflow: hidden;
display: block;
}

nav ul
{
margin: auto;
padding: 0;
display: flex;
font-size: 100%;
list-style: none;
list-style-type: none;
}

nav ul li
{
display: inline-block;
}

nav a
{
transition: 0.3s;
background-color: #fff;
}

nav ul li a
{
text-decoration: none;
padding: 10px 30px;
display: flex;
color: #000000;
background-color: red;
}

nav a:hover
{
color: #fff;
background-color: red;
}

nav .active
{
background-color: red;
color: #000000;
}