JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Cafe Restaurant</title>
	<link href="css/style.css" rel="stylesheet" />
</head>
<body>
	<div id="wrapper">
	
		<div id="header_top">
			<div id="h_t_left">
				<p class="p1">Home Delivery</p>
				<p class="p2">123-456-7890</p>
			</div>
				
			<div id="h_t_center">
				<img src="img/logo.png" alt="img" />
			</div>
			
			<div id="h_t_right">
				<div id="search">
					
					<ul>
						<li><a href="#">FAQ </a>|</li>
						<li><a href="#">Directions </a>|</li>
						<li><a href="#">Help</a></li>
					</ul>
					
					<form class="form_search">
							<input type="text" name="q" id="search_input1" placeholder="&nbsp;&nbsp;Search">
							<input type="submit" value="" id="search_input2">
							<div class="clear"></div>
					</form> 
				</div>
			</div>
			<div class="clear">
				</div>
		</div>
			
			
		<div id="body_in">
			<!-- <img src="img/border_top.png" id="border_top_img" alt="картинка" /> -->
			<div id="sidebar_top_bgg">
			<div id="sidebar_top">
			
			<div id="sidebar_top_in">
					<!-- <hr id="hr1"> -->
				<ul>
					<li><a href="#">Home</a></li>
					<li>.</li>
					<li><a href="#">About us</a></li>
					<li>.</li>
					<li><a href="#">Menu</a></li>
					<li>.</li>
					<li><a href="#">Dinner</a></li>
					<li>.</li>
					<li><a href="#">Lunch</a></li>
					<li>.</li>
					<li><a href="#">Specials</a></li>
					<li>.</li>
					<li><a href="#">Party</a></li>
					<li>.</li>
					<li><a href="#">Catering</a></li>
					<li>.</li>
					<li><a href="#">Contact us</a></li>
				</ul>
					<!-- <hr id="hr2"> -->
			</div>
			</div>
			</div>
			<div id="ramka">
			<div id="header">
			<img src="img/header.png" id="header_bg" alt="img">
			<button id="button_order">Order Now</button>		
			</div>
			
			<div id="block">
				
				<div id="block_l"> 
				<h1 class="block_head_text">Daily Menu</h1>
				<img src="img/block_l.png"  alt="картинка">
				<p>Agedame tuna roll</p>
				<p>Maki de atún...

CSS

@charset "u1tf-8";
/* CSS Document */
@font-face {
font-family: "Fertigo Pro"; 

}
.class{
clear:both;
}

body{
	margin:0;
	padding:0;
	background-color:#a2745a;
	background: url(../img/bgg.png) no-repeat scroll 0 0 transparent;
	background-position:center;
	width:100%;
	}
#wrapper{outline:0px solid #ffffff;
	width:100%;
	margin:0 auto;
	padding:0;
	}
#header_top{outline:0px solid #ffffff;
	width:960px;
	height:170px;
	margin:0 auto;
	height:170px;
	padding:0;
		}
#h_t_left{outline:0px solid #ffffff;
    float:left;
	width:320px;
	height:170px;
	}
.p1 {
padding:0;
margin:0;
font:25px "Fertigo Pro";
font-size:25px;
color:#a2745a;
margin-top:60px;
}
.p2 {
padding:0;
margin:0;
font:25px "Fertigo Pro";
font-size:35px;
color:#ffd7c1;
}
#h_t_center{outline:0px solid #ffffff;
	float:left;
	width:320px;
	text-align:center;
	height:170px;
	}
#h_t_right{outline:0px solid #ffffff;
	float:left;
	width:320px;
	height:170px;
}
.form_search{outline:0px solid #ff0000;
	width:250px;
	height:38px;
	display:inline;
	padding:0;
	margin:0;
	float:right;
}
#search{
	padding:0;
	margin:0;
}
#search ul{
padding:0;
margin:50px 2px 0px 70px;
}
#search li{
	display:inline;
	font:13px Georgia;
	color:#e3bba5;
}
#search a{text-decoration:none;}
#search a:link{
color:#e3bba5;	
}
#search a:hover{
color:#e3bba5;	
}
#search a:active{
color:#e3bba5;	
}
#search a:visited{
color:#e3bba5;	
}
#search_input1{
width:200px;
height:34px;
padding:0;
margin:0;
border-left: 2px solid #e3bba5;
border-top: 2px solid #e3bba5;
border-bottom: 2px solid #e3bba5;
border-right: none;
float:left;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
background-color: rgba(22, 12, 9, 0.6);
color:#e3bba5;
}
#search_input2{
background-image: url(../img/search.png);
background-repeat:no-repeat;
background-position:16px 9px;
background-color: rgba(22, 12, 9, 0.6);
border-right: 2px solid #e3bba5;
border-top: 2px solid #e3bba5;
border-bottom: 2px solid #e3bba5;
border-left:...