JSFiddle - React, Tailwind, and code Playground

by Gereltod Gotsbayar

HTML

<div id="nav">
    <ul>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
    </ul>
</div>

<div id="nav2">
    <ul>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
    </ul>
</div>

CSS

#nav ul li{
list-style:none;
}

#nav ul li a{
color:#000;
text-decoration:none;
float:right;
padding:10px;
vertical-align:middle;
line-height:35px;
padding-left:25px;
padding-right:25px;
display:block;
}

#nav ul li a:hover{
border-top:1px solid #FF7300;
color: #FF7300;
}

#nav{
padding-right:25px;
font-size:17px;
}

#nav ul{
border-bottom:1px solid #DBDBDB;
border-top:1px solid #DBDBDB;
height:54px;
}

/* fixed */
#nav2 ul li{
    list-style:none;
}

#nav2 ul li a{
    color:#000;
    text-decoration:none;
    float:right;
    padding:10px;
    vertical-align:middle;
    line-height:35px;
    padding-left:25px;
    padding-right:25px;
    display:block;
}

#nav2 ul li a:hover{
    border-top:1px solid #FF7300;
    color: #FF7300;
    
    /* magic trick here */
    /* abracadabra */
    margin-top: -1px; 
}

#nav2 {
padding-right:25px;
font-size:17px;
}

#nav2 ul{
border-bottom:1px solid #DBDBDB;
border-top:1px solid #DBDBDB;
height:54px;
}