JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  			<nav class="container header-nav">
				<ul>
					<li><a href="#">Home</a></li>
					<li><a href="#cupcakes">Cupcakes</a></li>
					<li><a href="#cakes">Cakes</a></li>
					<li><a href="#events">Events</a></li>
					<li><a href="#contacts" class="btn nav-btn">Order Now!</a></li>
				</ul>
				<br>
			</nav>
</body>
</html>

CSS

.btn  {
	color: rgb(255,255,255);
	background-color: rgb(227,37,81);
	border-radius: 8px;
	padding: 5px;
	border-bottom: 5px solid rgb(255,144,171);
	display: block;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	white-space: nowrap;
}

.header-nav a:hover {
	border-bottom: 5px solid rgb(56,47,50);
}

.header-nav a:last-of-type:hover {
    border-bottom: 5px solid rgb(255,144,171); /*pink-border-bottom*/
}