JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrp-header">
<header>
		<a href="/" class="logo">Логотип</a>
		<div class="navigation">
			<span id="nav-toggle"></span>
			<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>
		</div>
	</header>
  </div>

CSS

.wrp-header {
  margin-top: 30px;
  margin-bottom: 30px;
}
.wrp-header::after {
  display: block;
  clear: both;
  
  content: '';
}
@media all and (min-width: 1241px) {
  .wrp-header {
    background: linear-gradient(to right, transparent 70%, #d91d52 70%, #d91d52 100%);
  }
}

header{
	width: 1170px;
	margin: auto;
	padding-left: 70px;
}

header a.logo{
	float: left;
  
	width: 288px;
}
nav{
	position: relative;
  
	float: right;
  
	padding: 22px 0 22px 17px;
  
	background: #d91d52;
}
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;
}