JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
	<title>Первый вид меню</title>
	<link rel="stylesheet" type="text/css" href="css/menu1.css">
</head>
<body>
	<div class="menu">
		<div class="href">
			<a href="#">Главная</a>
			<a href="#">Новости</a>
			<a href="#">Видео</a>
			<a href="#">Картинки</a>
			<a href="#">Форум</a>
			<a href="#">Контакты</a>
			<a href="#">О нас</a>
			<form class="searchBox">
				<input id="search" type="text" placeholder="Введите текст">	
				<input id="button" type="button" value="Искать">
			</form>
		</div>
		
	</div>
</body>
</html>

CSS

* {
 	padding: 0;
 	margin: 0;
 }

 body { 
 	background: rgb(237, 237, 237);
 	height: 10000px;
 }

 .menu {
 	width: 100%;
 	height: 50px;
 	background: rgba(0,0,0,0.6);
 	position: fixed;
 	margin: 0 auto
 }

.href {
	padding: 0 0 0 20%;
}

 .menu a {
 	text-decoration: none;
 	color:white;
 	font-family: "Myriad Set Pro","Lucida Grande","Helvetica Neue","Helvetica","Arial","Verdana","sans-serif";
 	padding:15px 0 0 30px;
 	display: inline-block;
 	text-align: center;
 }

 .menu a:hover {
 	color:#BBB5AD;
 }

 .searchBox {
 	display: inline-block;
 	padding-left: 250px;
 }

 #search {
 	height: 30px;
 	border:1px solid white;
 	border-radius: 8px 0 0 8px;
 }
 #button { 
 	margin-left: 3px;
 	height: 30px;
 	background: rgba(94, 94, 94, 1);
 	border:1px solid white;
 	border-radius: 0 8px 8px 0;	
 	color:#BBB5AD;
 	font-family: "Myriad Set Pro","Lucida Grande","Helvetica Neue","Helvetica","Arial","Verdana","sans-serif";
 	font-size: 16px;
 }

 .searchBox #button:visited {
 	border:1px solid rgba(94, 94, 94, 1);
 	background: rgba(94, 94, 94, 1);
 }