JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="ru">
 <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/style.css">
    <title></title>
 </head>
 <body>
 	<div id="wrapper">
 		<div id="basis">
 			<div id="header">
 				<div id="nav">
 					<ul>
 						<li id="n1"><a href="">Home</a></li>
 						<li id="n2"><a href="">Articles</a></li>
 						<li id="n3"><a href="">Tutorials</a></li>
 						<li id="n4"><a href="">Contact</a></li>
 					</ul>
 				</div>
 			</div>
 		</div>
 	</div>
 </body>
</html>

CSS

/*Таблица сброса Эрика Мейера*/@import url(reset.css);
@import "https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css";

/*Шрифт Trebuchet MS*/
@font-face {
    font-family: "Trebuchet MS"; /* Гарнитура шрифта */
    src: url(../fonts/TrebuchetMS.ttf); /* Путь к файлу со шрифтом */
   }

#wrapper {
	width: 1920px;
	height: 1800px;
	margin: 0 auto;
	background-color: #E6DFCE;
	background-image: url(http://img-host.org.ua/images/bgiki.jpg);
	background-repeat: no-repeat;
	outline: 1px solid #B34EE9;
}

#basis {
	width: 980px;
	height: 1800px;
	margin: 0 auto;
	outline: 1px solid #FF00AE;
}

/*Начало блока header*/

#header {
	width: 980px;
	height: 220px;
	background-image: url(http://img-host.org.ua/images/logooco.png);
	background-repeat: no-repeat;
	background-position: -62px -3px;
	position: relative;
	outline: 1px solid #3941DE;
}

#header ul {
  position: relative;
  z-index: 1;
	float: right;
	margin: 47px 2px 0 0;
}

#header ul:before {
  content: '';

  position: absolute;
  top: -5px;
  left: 0;
  z-index: -1;

  width: 180px;
  height: 95px;
  margin-left: -95px;

  background: rgba(0, 0, 255, .5);
}

#header ul:after {
  content: '';

  position: absolute;
  bottom: 100%;
  right: 0;
  z-index: -1;

  width: 160px;
  height: 45px;
  margin-bottom: -5px;

  background: rgba(0, 0, 255, .5);
}

#header li {
	height: 58px;
	float: left;
	text-align: center;
	outline: 0px solid #14A92D;
}

#n1 {
	width: 119px;
	background-image: url(http://img-host.org.ua/images/navimg1.png);
	background-repeat: no-repeat;
}

#n2 {
	width: 130px;
	background-image: url(http://img-host.org.ua/images/navimg2.png);
	background-repeat: no-repeat;
}

#n3 {
	width: 143px;
	background-image: url(http://img-host.org.ua/images/navimg3.png);
	background-repeat: no-repeat;
}

#n4 {
	width: 130px;
	background-image: url(http://img-host.org.ua/images/navimg4.png);
	background-repeat: no-repeat;
}

#header a {
	height: 58px;
	display: block;
	text-decoration: none;
	font:...