JSFiddle - React, Tailwind, and code Playground

HTML

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

	<div id="wrapper">

		<div id="hmenu">
			<ul>
				<a href="#"><li>главная</li></a>
				<a href="#"><li>о сайте</li></a>
				<a href="#"><li>ссылки</li></a>
				<a href="#"><li>блог</li></a>
				<a href="#"><li>контакты</li></a>
			</ul>
		</div>
		<h2 id="h-h2">Название ресурса</h2>
		<p id="h-p">Девиз, краткая фраза о сайте</p>
		<div id="left-menu">
			<p>навигация</p>
			<ul>
				<li><a href="#">Меню 1</a></li>
				<li><a href="#">Меню 2</a></li>
				<li><a href="#">Меню 3</a></li>
				<li><a href="#">Меню 4</a></li>
				<li><a href="#">Меню 5</a></li>
				<li><a href="#">Меню 6</a></li>
			</ul>

			<p>Реклама:</p>
			<div id="lm-reklama">160x600</div>

		</div>

		<div id="content">
			<h2>Название статьи 1</h2>
			<p>Май 16, 2013</p> <p>Автор статьи: Ололош</p>
			<p>Содержимое статьи 1. Это содержимое статьи 1. В статье 1 есть <b>жирный текст</b>, кроме того, в статье 1 есть
			<a href="#">ссылки</a>. Статья 1 о том как можно использовать данный шаблон! Содержимое статьи 1. Это содержимое статьи 1. В статье 1 могут быть ссылки и жирный текст. Статья 1 о том как можно использовать данный шаблон.</p>

			<p>Содержимое статьи 1. Это содержимое статьи 1. В статье 1 есть <b>жирный текст</b>, кроме того, в статье 1 есть
			<a href="#">ссылки</a>. Статья 1 о том как можно использовать данный шаблон! Содержимое статьи 1. Это содержимое статьи 1. В статье 1 могут быть ссылки и жирный текст. Статья 1 о том как можно использовать данный шаблон.</p>

			<p>Подробнее...</p> <p>Коментарии</p>
		</div>
		<div id="footer">Copyright © 2013. Название компании. Все права защищены.</div>
	</div>
	
</body>
</hmtl>

CSS

* { 
  margin: 0;
  padding: 0;
}

body {
	font-family: Verdana, Tahoma, sans-serif, Arial;
	font-size: 12px;
}

#wrapper {
	margin: 0 auto;
	width: 850px;
	background: #efefef;
}

#hmenu { /* Меню / Шапка */
	background: #000;
	border-bottom: 2px solid #fff;
	box-shadow: 0 4px 10px 0 #000;
	text-align: center;
	color: #9b9a9a;
}

#hmenu li {
	list-style: none;
	font-size: 20px;
	color: #9b9a9a;
	padding: 15px;
	text-transform: uppercase;
	display: inline-block;
}

#hmenu li:hover {
	background: #4edcfa;
	color: #fff;
}

#hmenu li:active {
	background: #4edcfa;
	color: #fff;
	box-shadow: inset 0 -1px 2px 2px #ccc;
}

#h-h2 { /* Название ресурса */
	padding-left: 30px;
	color: #23c9ed;
}

#h-p { /* Девиз, краткая фраза о сайте */
	padding-left: 30px;
}

#left-menu {
	padding-top: 50px;
	width: 200px;
	float: left;
	border-right: 1px solid #bbb;
}

#left-menu li {
	list-style: none;
	padding-top: 10px;
	border-bottom: 1px dashed #4b4b4b;
	padding-left: 30px;
}

#left-menu a {
	text-decoration: none;
	color: #4b4b4b;
}

#left-menu a:hover {
	color: orange;
}

#left-menu a:active {
	color: red;
}

#left-menu p:first-child { /* навигация */
	padding-left: 30px;
	text-transform: uppercase;
	font-weight: bold;
}

#left-menu p:nth-child(3) { /* Реклама: */
	padding-left: 30px;
	margin-top: 30px;
	font-weight: bold;
}

#lm-reklama {
	margin-top: 5px;
	width: 160px;
	height: 300px;
	border: 1px solid #666;
	color: #666;
	text-align: center;
	padding-top: 300px;
}

#content {
	width: 550px;
	padding-left: 300px;
}

#content h2 { /* Название статьи 1 */
	padding-top: 20px;
	padding-bottom: 20px;
}

#content p:nth-child(2) { /* Май 16, 2013 */
	padding-top: 10px;
	padding-bottom: 10px;
	float: left;
}

#content p:nth-child(3) { /* Автор статьи: Ололош */
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 390px;
}

#content p:nth-child(5) { /* Содержимое статьи 1. Это содержимое стат.... */
	padding-top: 10px;
	padding-bottom: 10px;
}

#content p:nth-child(6) { /*...