JSFiddle - React, Tailwind, and code Playground

by fainz777

HTML

<ul>
    <li class="current"><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
</ul>

CSS

ul {
    margin: 0;
    padding: 0;
    list-style: none;
    border-bottom: 1px solid;
}

li {
    margin: 0 10px -1px 0;
    padding: 0;
    display: inline-block;
}

a {
    display: block;
    padding: 5px 10px;
}

li:hover,
.current {
    border: 1px solid;   
    border-radius: 5px 5px 0 0;
    border-bottom: none;
    background: #fff;
}
li:hover a {
    padding: 4px 9px 5px;
}