JSFiddle - React, Tailwind, and code Playground

by Alexey Lisovy

HTML

<div class="conteiner">
<div class="wrapper">
<header>
<a href="#" class="logo"><img src="http://cs10816.vk.me/u4898322/-12/x_7f3db622.jpg" 
  width="83" height="83" alt="Логотип"></a>
			<nav>
				<a href="#">Пунк 1</a>
				<a href="#">Пунк 2</a>
				<a href="#">Пунк 3</a>
				<a href="#">Пунк 4</a>
				<a href="#">Пунк 5</a>
				<a href="#">Пунк 6</a>
			</nav>
	</header>
<p>Да здравствует Африка!</p>
</div>

CSS

.conteiner
    {
      width: 1700px;   /*контейнер имулирует широкую страничку, соответственно размер можно менять, меняя значение, чтоб смотреть как будет в других больших разрешеиях или просто отменить правило и менять ширину окна, когда его размер достаточен*/
    }
.wrapper
    {
      overflow: hidden;      
    }
header{
	width: 1170px;
  box-sizing: border-box;
	margin: auto;
	padding: 30px 0 30px 70px;
  background: RGBA(255, 255, 255, .8);
  position: relative;
}
header a.logo{
	width: 288px;
	height: 83px;
}
header a.logo img
    {
      vertical-align: middle;
    }
nav{
	position: absolute;
  right: 0;
  display: inline-block;
	background: #d91d52;
  line-height: 66px;
  height: 66px;
}
nav:before{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: -46px;
	bottom: 0;
	border-bottom: 66px solid #d91d52;
	border-left: 46px solid transparent;
}
nav a{
	margin-right: 35px;
	font-family: 'Open Sans', sans-serif;
	text-decoration: none;
	font-style: italic;
	text-transform: uppercase;
	color: #fff;
}
header::before
    {
      content:'';
      display: block;
      float: right;
      background: #d91d52;
      height: 66px;
      margin-right: -100%;
      width: 100%;
    }