JSFiddle - React, Tailwind, and code Playground

by Ksena

HTML

<body>
	<div id="wrapper">
		<div id="header">
			<div class="logo">
				<a href="#" alt="webreference.ru"> <img src="images/logo.jpg"/> </a>
			</div>
			<div class="forma">
				Поиск по сайту
			<form method="post" action="">
				<input type="text" />
				<a href="" alt=""> <img src="images/search.jpg" class="search"></a>
			</form>
			</div>
			<div class="pages">
				<a href="#" alt=""><img src="images/house.jpg"><img src="images/mail.jpg"><img src="images/pict3.jpg"></a>
			</div>
		</div>
		<div id="menu">
			<ul>
				<li><a href="">Создание сайта</a></li>
				<li><a href="">Веб-дизайн</a></li>
				<li><a href="">(X)HTML</a></li>
				<li><a href="">CSS</a></li>
				<li><a href="">CMS</a></li>
				<li><a href="">Веб-программирование</a></li>
				<li><a href="">Ресурсы</a></li>
				<li><a href="">Статьи</a></li>
				<li><a href="">Форум</a></li>
			</ul>
		</div>

CSS

body{
	margin: 0 auto;	
	font-family: arial, no-serif;
	text-align: justify;
}
#wrapper{
	margin: 0 auto;
	width: 980px;
	background: url("../images/bg.jpg");
}
#header{
	padding: 57px 50px 70px 47px;
    background: red
}
.logo{
	width: 422px;
	height: 64px;
	float: left
}
.pages a img{
	padding-right: 7px;
	padding-top: 40px
}
.pages{
	margin-left: 520px;
}
.forma{
	font-size: 13px;
	float: right;
	padding: 20px 15px 0 0;
}
input{
	padding: 0 3px 0 3px;
	width: 153px;
	margin-top: 3px;
	border: solid 1px #6d6e8d;
}
.search {
	margin-left: 5px;
	margin-bottom:-5px;
}
#menu ul{
	margin-top: 5px;
	font-size: 12px;
	white-space: nowrap;
}
#menu ul li{
	display: inline-block;
	list-style: none;
}
#menu ul li a{
	text-decoration: none;
	color: black;
	padding: 3px 24px
}
#menu ul li a:hover{
	background: #e27e0f
}