JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<header>
		<div class="header">
			<div class="logo">
				<h2><a href="#">Startup</a></h2>
			</div>
			<div class="menu">
				<ul>
					<li><a href="#">Home</a></li>
					<li><a href="#">Services</a></li>
					<li><a href="#">About</a></li>
					<li><a href="#">Works</a></li>
					<li><a href="#">Blog</a></li>
					<li><a href="#">Clients</a></li>
					<li><a href="#">Contact</a></li>
				</ul>
			</div>
			<div class="text">
				<h3>Welcome to Startup</h3><br>
				<p>Your Favourite Creative Agency Template</p>
				<form action="">
					<input type="button" value="Get Started">
				</form>
			</div>
		</div>
	</header>
</body>

CSS

*{
	margin: 0;
	padding: 0;
}
header{
	width: 100%;
	height: 770px;
	background-image: url(../img/header_img.jpg);
}
.header{
	width: 1140px;
	margin: 0 auto;
	height: 770px;
	padding-top: 40px;
}
.logo{
	float: left;	
}
.logo h2 a{
	color: #fff;
	font-family: 'Montserrat', 'Arial', 'Times New Roman';
	font-size: 24px;
	text-decoration: none;
}
.menu{
	float: right;
}
.menu ul{
	display: flex;
	list-style: none;
	float: right;
}
.menu ul li{
	margin-left: 18px;
	padding: 10px;
}
.menu ul li a{
	text-decoration: none;
	color: #fff;
	font-size: 14px;
	font-weight: normal;
}
.menu ul li a:hover{
	text-decoration: underline;
}
.menu ul li:last-child{
	padding-right: 0;
}
.text{
	margin: 200px auto;
}
.text h3{
	text-transform: uppercase;
	color: #fff;
	font-weight: normal;
	font-size: 48px;
	text-align: center;
}
.text p{
	color: #fff;
	font-size: 20px;
	text-align: center;
}
.text form{
	margin-top: 50px;
	text-align: center;
}
.text form input{
	width: 175px;
	height: 48px;
	color: #fff;
	background: none;
	border: solid 2px #fff;
	text-transform: uppercase;
	border-radius: 1px;
	cursor: pointer;
}