JSFiddle - React, Tailwind, and code Playground

by Sky Cap

HTML

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

CSS

ul {
    list-style-type: none;
    padding: 0;
    overflow: hidden;
    width: 265px;
    height: 2.45em;
    margin: 5em;
    border-radius: 500px;
    background-color: #4da6ff;
}

li {
    float: left;
}

li a {
    position: relative;
    top: 10px;
    left: 1px;
    color: #4da6ff;
    text-decoration: none;
    padding: 8.5px 11px;
    margin-left:2px;
    width: 40%;
    border-radius: 500px;
    background-color: #ffffff;
}

/* Change the link color to #111 (black) on hover */
li a:hover {
    background-color: #e6e6e6;
}

 .active {
    background-color: #ffffff;
    color: #4da6ff;
}