JSFiddle - React, Tailwind, and code Playground

HTML

<header>
		<nav>
			<ul>
				<li><a href="">link 1</a></li>
				<li><a href="">link 2</a></li>
				<li><a href="">link 3</a></li>
			</ul>
		
		</nav>
	</header>

CSS

/* Header */
header {
	background-color: #3f5efc;
	height: 450px;
	padding-top: 50px;
	}

header img {
	float: right;
	}
/* Navigation */

nav {
	width: 60%;
	float: left;
	height: 100px;
	background-color: #333333;
	-webkit-border-top-right-radius: 15px;
	-webkit-border-bottom-right-radius: 15px;
	-moz-border-radius-topright: 15px;
	-moz-border-radius-bottomright: 15px;
	border-top-right-radius: 15px;
	border-bottom-right-radius: 15px;
	}
	
nav ul {
	padding-right: 15px;
    padding: 0px;
    margin: 0px;
}

nav li {
	display: inline-block;
    float: left;
    }

nav a {
	display: inline-block;
	font-size: 27px;
	background-color: #333333;
	padding: 33px 25px;
	color: #fff;
	}

nav a:hover {
	background-color: #777777;
	}