JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<title>Paprika</title>
	<link href="css/bootstrap.css" rel="stylesheet">
	<link rel="stylesheet"  href="css/style.css">
</head>
<body>

		<div class="header">
			<div class="row main-menu">
				<div class="wrapper">
        		<div class="col-xs-12 col-md-6 ">
        			<section class="jqueryOptions opt1">
					<ul>
						<li>
							<a href="#">Меню</a>
						</li>
						<li>
							<a href="#">Ресторан</a>
						</li>
						<li>
							<a href="#">Банкетный зал</a>
						</li>
						<li>
							<a href="#">Спорт-бар</a>
						</li>
						<li>
							<a href="#">Контакы</a>
						</li>
					</ul>
					</section>
					
				</div>
				<div class="col-xs-12 col-md-6">
				<div class="order">
					<button>Заказать банкет</button>
				</div>
				<div class="select-area">
	  				<select name="choose" id="choose" class="input-select">
						<option value="opt1">RU</option>
						<option value="opt2">EN</option>
			      	</select>
			    </div>
				<div class="tel">
					<span>22 070 700</span>
				</div>
				</div>
				</div>	
			</div>
			<div class="row head">
        		<div class="col-xs-12 col-md-12 ">
        			<h1>Европейская кухня</h1>
        			<h2>ПРИЯТНОГО АППЕТИТА!</h2>
        			<div class="order2">
						<button>Заказать банкет</button>
					</div>
        		</div>
        	</div>	
        	<div class="row wrapper about-rest" >
        		<div class="col-xs-12 col-md-12 ">
        			<div class="h2-about">
        				<h2><span>О нашем ресторане</span></h2>
        			</div>
        		</div>	
        	</div>	
		</div>
</body>
</html>

CSS

*
{
	padding: 0;
	margin: 0;
}
.no-gutter > [class*='col-'] {
    padding-right:0;
    padding-left:0;
}
.cliarfix
{
	clear: both;	
}
body
{
	font-family: Calibri;
	background: #fff;
	width: 1920px;
	margin: 0 auto;
}
.wrapper
{
	width: 1120px;
	margin: 0 auto;
}
.header
{
	margin: auto 0;
	text-align: center;
}
.main-menu
{
	width: 100%;
	height: 110px;
	position: fixed;
	padding: 25px 0;
	background: #fff;
	z-index: 999;
	margin: auto 0;
}
.main-menu ul
{
	list-style-type: none;
	display: inline-block;
}
.main-menu li
{
	list-style-type: none;
	display: inline;
	padding-right: 18px;
}
.main-menu a, select, .order button, .tel
{
	font-size: 18px;
	color: #475153;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-weight: bold;
	text-decoration: none;
	transition: 0.2s;
}
.main-menu a:hover
{
	color: #d0af50;
	text-transform: uppercase;
}
.main-menu ul, .select-area, .tel
{
	padding-top: 16px;
}
.order button
{
	width: 218px;
	height: 48px;
	border: 2px solid #474f52;
	background: #fff;
	border-radius: 26px;
	transition: 0.2s;
}
.order button:hover
{
	background: #d0af50;
	border: none;
}
.select-area, .order, .tel
{
	float: right;
	text-align: right;
	margin-left: 42px;
	display: inline-block;
}
.input-select
 {
  width: 45px;
  height: 20px;
  overflow: hidden;
  background: url(../images/arrow.png) no-repeat right;
  position: relative;
  border: none;
}
.input-select select {
	background: #fff;
  	-webkit-appearance: none;
  }
select, option {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 20px;
}
.tel
{
	font-size: 19px;
	letter-spacing: 3px;
}
.head
{
	background-image: url(../images/head.jpg);
	height: 1074px;
	background-position: right top 105px;
	color: #494e52;
	text-align: center;
	margin: auto 0;
}
.head h1
{
	font-size: 54px;
	letter-spacing: 12px;
	font-weight: bold;
	padding-top: 29.5%;
}
.head h2
{
	padding: 15px 0;
}
 h2
{
	font-size: 28px;
	letter-spacing: 5px;
	font-weight: bold;
	text-transform:...