JSFiddle - React, Tailwind, and code Playground

by Mark Ulybkin

HTML

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Верстка</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
	<div id="wrapper">
		<header>
				<div id="logo">
					<a href="/"><img src="http://cs625429.vk.me/v625429381/5d060/lhfkhsfQbA0.jpg"/></a>
				</div>
				
				<div id="top">
				<div id="menu_top_left">
				
					<table>
						<tr><td><img src="http://cs625429.vk.me/v625429381/5d080/p1TN0BCXwZU.jpg"/> Всего родов: 90060</td><td><img src="http://cs625429.vk.me/v625429381/5d04b/2iVAogL6Tco.jpg"/> Мальчиков: 8</td></tr>
						<tr><td><img src="http://cs625429.vk.me/v625429381/5d059/5Pq4qxlpJWQ.jpg"/> За сутки: 17</td><td id="girl"><img src="http://cs625429.vk.me/v625429381/5d052/QPwxjRu3p00.jpg"/> Девочек: 9</td></tr>
					</table>
				</div>	
				
				<div id="menu_top_right">
					<p>Автоматическая справочная служба:<br>+ 7 (495) 718-20-88<br></p>
					<p id="point"><img src="http://cs625429.vk.me/v625429381/5d070/1l444E0Q2KU.jpg"/><a href="/">  Контактная информация</a></p>
					
				</div>
				</div>	
				
				<nav>
					<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>
				</nav>
		</header>
		
		<div class="top_area">
		</div>
		
		<section>
			<aside class="left">
			</aside>
			
			<article>
			</article>
			
			<aside class="right">
			</aside>
		</section>
		<footer></footer>
		
		
	</div>

</body>
</html>

CSS

#wrapper {
	width: 1280px;
	margin: -8px auto;
}

header {
	width: 1280px;
	height: 171px;
	background: url(http://cs625429.vk.me/v625429381/5d069/7GmUWe9Gz2E.jpg) no-repeat;
}

#logo {
	width: 194px;
	height: 236px;
	float: left;
	margin-left: 157px;
}

#top {
	overflow: hidden;
	color: #66698b;
	font: regular 16px Trebuchet MS Regular, Arial, sens-serif;
}

#menu_top_left table {
		border-spacing: 26px 2px;
		float: left;
		margin-top: 12px;
}



#menu_top_right p {
		float: right;
		margin-right: 160px;
		margin-top: 30px;
		text-align: right;
		padding-left: 50px;
}

#menu_top_right #point {
	margin-top: -27px;
}

nav ul {
	padding-top: 13px;
	padding-left: 32px;
	overflow: hidden;
}

nav ul li {
	float: left;
	list-style-type: none;
	color: #66698b;
	font: regular 16px Trebuchet MS Regular, Arial, sens-serif;
	margin-right: 75px;
	
}

nav .active, nav ul li a:hover {
	color: b2b2b2;
	text-decoration: none;
}

nav ul li a {
	color: #252c65;
	font: regular 16px Trebuchet MS Regular, Arial, sans-serif;
}

.top_area  {
	width: 1077px;
	height: 481px;
	margin: 0 auto;
	background: url(http://cs625429.vk.me/v625429381/5d079/3h6fdjFPSIM.jpg) no-repeat;
}