JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
 <html>
 <head>
 <title>HTML</title>
 <meta name="keywords" content="HTML, META, метатег, тег, поисковая система">
 <meta charset="utf-8">

 <!--[if lt IE 9]> 
 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
 <![endif]-->


 </head>

 <body>
 <header>
 <h1>Шапка сайта</h1>
 </header>

 <nav>
 <div class="css-menu-1">
 <li><a href="#"class="selected">Главная</a></li> 
 <li><a href="#">HTML уроки</a></li>
 <li><a href="#">CSS уроки</a></li>
 <li><a href="#">Справочник</a></li>
 </div>
 </nav>

 <div class="nav-dop">
 2ой ряд меню
 </div>

 <div class="warring">
 Внимание! Сайт находится в стадии разработки.
 </div>

 <article>
 <h2>страница</h2>
 </article>


 <footer>
 Copyright Alex
 </footer>
 </body>
 </html>

CSS

* { margin:0; padding: 0;}
 header {
 display: block; /* Для старых браузеров */
/* Высота шапки */
 background: #ffffff no-repeat center bottom;
 }

 nav {
 background: #557799 no-repeat center bottom;
 height: 32px;
 display: block;
 }

 .css-menu-1 {
 list-style: none
 }

 .css-menu-1 li {
 display: inline
 }

 .css-menu-1 li a {
 font-family: Tahoma, Geneva, sans-serif; 
 text-decoration: none;
 font-weight: 550;
 color: #ffffff; 
 padding: 10px; 
 }

 .css-menu-1 li a:hover {
 text-decoration: underline;
 }

 .css-menu-1 li a.selected {
 color: #000000;
 background: #adbfd1;
 text-decoration: none;
 }


 .nav-dop {
 background: #cbd7e2 no-repeat center bottom;
 height: 28px;
 display: block;
 }

 .warring {
 background: #ffffae no-repeat center bottom;
 height: 30px;
 display: block;
 }