JSFiddle - React, Tailwind, and code Playground

HTML

<div>
            <ul>
               <li><a href="#" class=active">Learn</a></li>
               <li><a href="#">Hosting</a></li>
               <li><a href="#">Download</a></li>
                   <li><a href="#">Comunity</a></li>
            </ul>    
        </div>

CSS

body {
    font-family: 'Segoe UI';
}
ul {border-bottom:2px solid #757575; margin:0px; padding:0px; }
ul li { display: inline-block;  }
ul li a { display:block; padding:5px 10px 5px 10px; text-decoration:none; color:#333; }

ul li a:hover {
     background-color: #757575; color:#fff; 
    border-top-left-radius:10px;
     border-top-right-radius:10px;
}
.active {
     background-color: #757575; color:#fff; 
    border-top-left-radius:10px;
     border-top-right-radius:10px;
}