JSFiddle - React, Tailwind, and code Playground

by harianus

HTML

<ul id="navlist">
<li><a href="#" id="current">1</a></li>
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
<li><a href="#">D</a></li>
</ul>

CSS

#navlist
{
padding: 15px 0;
margin-left: 0;
    
border-bottom: 1px solid #778;
font-size: 14px;
}

#navlist li
{
list-style: none;
margin: 0;
display: inline-block;
}

#navlist li a
{
padding: 15px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: #DDE;
text-decoration: none;
}

#navlist li a:link { color: #448; }
#navlist li a:visited { color: #667; }

#navlist li a:hover
{
color: #000;
background: #AAE;
border-color: #227;
}

#navlist li a#current
{
background: white;
border-bottom: 1px solid white;
}