JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<header>
		<div class="logo"><img src="images/"  alt=""></div>
		<div class="slogan">Слоган</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>
	<section>
		<aside class="left">
			<nav>
				<ul>
					<li><a href="#">Пункт вашего меню</a></li>
					<li><a href="#">Пункт меню</a></li>
					<li><a href="#">Пункт вашего меню сайта изменяется при наведении</a></li>
					<li><a href="#">Пункт с подразделом</a>
						<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>
						</ul>
				</li>
					<li><a href="#">Пункт меню</a></li>
				</ul>
			</nav>
		</aside>
				<aside class="right">
						<div class="news">
        	<a class="arhiv" href="#">Архив</a>				
        	<div>Новости</div>
        	<time>2013-12-31</time>
        	<a class="text" href="#">Содержание новости, информация по новости, краткое содержание</a>
			</div>
		</aside>
		<article>
			<div class="top">
 				<a href="#">Главная</a><div>\ О компании</div>
 			</div>
 			<h1>h1</h1>
 			<h2>h2</h2>
 			<h3>h3</h3>
 			<h4>h4</h4>
 			<h5>h5 h6</h5>
 			<p>Text 'p'</p>
 			<a href="#">сслыка</a>		
 			<img src="images/" alt="">
 			<h1>h1</h1>
 			<h2>h2</h2>
 			<h3>h3</h3>
 			<h4>h4</h4>
 			<h5>h5 h6</h5>
 			<p>Text 'p'</p>
 			<a href="#">сслыка</a>		
 			<img src="images/" alt="">
 			<h1>h1</h1>
 			<h2>h2</h2>
 			<h3>h3</h3>
 			<h4>h4</h4>
 			<h5>h5 h6</h5>
 			<p>Text 'p'</p>
 			<a href="#">сслыка</a>		
 			<img src="images/" alt="">
 		</article>


		<div class="clear"></div>
	</section>
	<div class="pusto"></div>
	<footer>
		<div class="logo"><img src="images/"  alt=""></div>
		<div class="copy">&copy; Copyright 2013 <br>
			Заказ,создание сайта: <a href="#">megagroup.ru</a>
		</div>
	</footer>
</body>

CSS

.h100 {
  height: 100%;
}
.mp0 {
  margin: 0;
  padding: 0;
}
.pa {
  position: absolute;
}
h1 {
  font-size: 20px;
}
h2 {
  font-size: 18px;
}
h3 {
  font-size: 16px;
}
h4 {
  font-size: 14px;
}
h5,
h6 {
  font-size: 12px;
}
ul {
  margin: 0;
  padding: 0;
}
ul li {
  list-style-type: none;
}
ul li a {
  display: block;
}
html {
  height: 100%;
  margin: 0;
  padding: 0;
}
body,
header,
section,
aside,
article,
footer {
  position: relative;
  display: block;
}
body {
  min-height: 100%;
  width: 990px;
  margin: 0 auto -300px;
}
.ie10 body {
  margin-bottom: 0px;
}
header {
  height: 200px;
}
header nav {
  position: absolute;
  text-align: center;
  width: 100%;
  bottom: 0;
}
header nav ul li {
  display: inline-block;
}
header nav ul li a {
  text-decoration: none;
  padding: 0 20px 0;
  color: black;
  font: normal 15px "Times New Roman";
}
header nav ul li a:hover {
  background: black;
  color: white;
}
header .logo,
header .slogan {
  position: absolute;
}
header .logo {
  top: 0 ;
  right: 0 ;
}
header .slogan {
  left: 50px;
  top: 100px;
}
section {
  margin: 0;
  padding: 0;
  padding: 40px 260px 0 230px;
}
section a:hover {
  text-decoration: none;
}
aside.left {
  margin-left: -230px;
  width: 200px;
  float: left;
  position: relative;
}
aside.left nav ul li {
  padding: 0 0 0 20px;
}
aside.left nav ul li a {
  text-decoration: none;
  display: inline-block;
  color: black;
  font: normal 15px/30px "Times New Roman";
}
aside.left nav ul li a:hover {
  background: black;
  color: white;
}
aside.left nav ul li ul li {
  padding: 0 0 0 40px;
}
aside.left nav ul li ul li a:hover {
  text-decoration: underline;
  background: none;
  color: black;
}
.news {
  position: relative;
  margin-top: 40px;
  font: normal 14px "Times New Roman";
  color: black;
  padding-bottom: 40px;
}
.news a.arhiv {
  position: absolute;
  right: 0;
}
.top a:hover {
  text-decoration: none;
}
.top div {
  display: inline-block;
}
.pusto {
  height: 300px;
  clear:...