JSFiddle - React, Tailwind, and code Playground

by Vasiliy

HTML

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="styles.css">
	<title>Тест</title>
</head>
<body>
	<div class="wrapper">
		<header>
			<div class="logo">
				<img src="http://theory.phphtml.net/exercises/css/praktika-po-mnogokolonochnym-maketam-sajtov/1/logo1.jpeg" alt="">
			</div>
			<div class="sitename">
				<span>www.site.com</span>
			</div>
			<nav>
				<ul>
					<li><a href="#">Главная</a></li>
					<li><a href="#" class="active">О компании</a></li>
					<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>
		<aside class="left">
			<span>left</span>
		</aside>
		<aside class="right">
			<span>right</span>
		</aside>
		<main>
			<h1>О компании</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse urna ante, egestas ac nibh sit amet, vehicula posuere quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pretium consequat volutpat. Integer ultricies ligula eget arcu volutpat vehicula. Sed et congue nisi, ac cursus ex. Duis tempus arcu magna, quis auctor odio congue in. Duis nunc leo, tempor nec dignissim sed, euismod vel nibh.</p>
			<p>Sed consequat lobortis tellus quis fringilla. Aenean eleifend sapien quis tellus rhoncus, et elementum justo pulvinar. Vestibulum gravida metus non turpis congue dignissim. Cras vitae urna nibh. Morbi consectetur ex vel cursus bibendum. Nunc dignissim massa non lacus commodo fringilla. Sed id ipsum ac diam fermentum condimentum feugiat a nunc. Nulla tincidunt vel ante non venenatis. Vestibulum fermentum velit et auctor sodales. Sed sagittis metus eget justo lobortis lobortis. Nulla dictum condimentum ipsum, a interdum nibh rutrum a. Nulla sed justo mi. Suspendisse sit amet feugiat magna.</p>
			<p>Nulla eros justo, vulputate ac eros in, semper pharetra ex. Interdum et malesuada...

CSS

* {
	margin: 0;
	padding: 0;
	outline: none;
}
.clearfix {
	clear: both;
}

.wrapper {
	width: 1000px;
	margin: 0 auto;
	border: 1px solid black;
}
header {
	position: relative;
	min-height: 200px;
	outline: 1px solid black;
}
.logo > img {
	position: absolute;
	top: 10px;
	left: 0px;
	width: 200px;
}
.sitename {
	position: absolute;
	top: 10px;
	left: 200px;
	font-size: 19px;
    font-weight: bold;
}

nav {
	position: absolute;
	top: 40px;
	left: 200px;
	outline: 1px solid black;
}
nav ul {
	font-size: 0;
}
nav ul > li {
	display: inline-block;
	list-style-type: none;
}
nav li > a {
	color: blue;
	font-size: 16px;
	text-decoration: none;
	line-height: 30px;
	padding: 0px 10px;
}
nav li > a:hover {
	color: red;
	text-decoration: underline;
}
.active {
	color: red;
	text-decoration: underline;
}

main {
	margin: 0px 200px;
	padding: 0px 20px;
	border: 1px solid black;
}
main p {
	margin: 10px 0px;
	text-align: justify;
}

aside {
	width: 200px;
}
.left {
	float: left;
}
.right {
	float: right;
}

footer {
	padding-top: 180px;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	border: 1px solid black;
}
footer > address {
	font-style: normal;
}