JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="styling.css">
</head>
<body>
	<header class='header-bg'>
		<div class="navigation">
			<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>
					<li><a href="#">Link</a></li>
				</ul>
			</nav>
		</div>
	</header>
</body>
</html>

CSS

body {
	margin:0;
	font-family:sans-serif, Arial;
}

 .navigation ul li {
	display:inline-block;
	float:right;
	margin-right:45px;
	font-size:23px;
	margin-top:4px;
}

ul li a {
	color:#000;
}

ul li a:hover {
	color:#CA435E;
	border-bottom:1px solid #000;
}

a {
	text-decoration:none;
}

.header-bg {
	width:100%;
	height:50px;
	border-bottom: 2px solid #000;
	background:#E4E0E3;

}