JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">
	<nav>
        <ul>
	        <li><a href="#">About us</a></li>
	        <li><a href="#">Support</a></li>
	        <li><a href="#">Contact</a></li>
	    </ul>
    </nav>
</div>

CSS

#header {
	font-family: Arial, sans-serif;
	font-size: 15px;
	color: #50595f;
	background-color: #f8f8f8;
	width:100%;
	height: 70px;
	border-bottom: 1px solid #e2e2e2;
	text-transform: uppercase;
	}

nav {
	margin: 0px;
    padding: 10px 0px 0px 0px;
	height:70px;
    overflow:hidden;
    }
		
	nav li {
		list-style-type: none;
		display:inline-block;
		padding: 0px 10px;
		vertical-align: top;
		}

		nav li a {
    		color: #666;
   		 	text-decoration: none;
			}

			nav li a:hover {
				color: #000;
   		 		text-decoration: none;
				}

		/* sliding underline */

		nav li a:after {
			content: '';
			display:block;
			margin: 5px 0px 0px 0px;
			border-bottom: 3px solid transparent;
    		width: 0px;
    		transition: 0.5s ease;
			}

			nav li a:hover:after {
   		 		border-bottom: 3px solid #0076a3;
    			width:50px;
				}