JSFiddle - React, Tailwind, and code Playground

by AshThakur

HTML

<ul class="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">Signup</a></li>
</ul>

<ul class="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">Signup</a></li>
</ul>

CSS

.nav{
  list-style: none;
  margin: 0;
  padding: 0;
  margin-top: 30px;
  text-align: center;
}
.nav li{
  display: inline-block;
  margin: 5px;
}
.nav li a{
  border: 1px solid #333;
  text-decoration: none;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: #333;
  font-weight: bold;
}
.nav li a:hover{
  background: red;
}
.nav li a:active{
  background: green;
}