JSFiddle - React, Tailwind, and code Playground

HTML

<header class="main-header"></header>
  <nav class="main-navigation">
    <ul class="main-menu">
      <li><a class="b-right" href="#">Link</a>
        <ul class="sub-menu">
          <li><a href="#">Суб меню</a></li>
          <li><a href="#">Суб меню</a></li>
          <li><a href="#">Суб меню</a></li>
        </ul>
      </li>
      <li><a class="b-left" href="#">Link</a></li>
      <li><a class="b-right" href="#">Link</a></li>
      <li><a class="b-left" href="#">Link</a></li>
      <li><a class="b-right" href="#">Link</a></li>
      <li><a class="b-left" href="#">Link</a></li>
      <li><a class="b-right" href="#">Link</a></li>
      <li><a class="b-left" href="#">Link</a></li>
      <li><a class="b-right" href="#">Link</a></li>
      <li><a class="b-left" href="#">Link</a></li>
    </ul>
  </nav>

CSS

html,
body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background-color: #4c201f;
}

.main-header {
	width: 55.7%;
	min-height: 40%;
	background: url(https://s8.hostingkartinok.com/uploads/images/2018/11/3e36a08cd2cbc1c1633639392d2f0d9f.png) no-repeat;
    background-size: 100%;
	margin: 0 auto;
	position: relative;
    z-index: 2;
}

/* -------------------------------
 Меню
 ----------------------------------*/

.main-navigation {
    width: 55.8%;
    min-height: 380px;
	margin: 0 auto;
	margin-top: -50px;
	margin-bottom: -5px;
}

.main-menu {
	position: relative;
    z-index: 1;
    display: flex;
    flex-grow: 1;
    margin-right: 1%;
}

.main-menu .b-right, .main-menu .b-left {
  	position: relative;
  	margin: 8px 8px 0 3px;
    padding: 25px 13px 15px 5px;
  	border-bottom: 4px solid #ffd569;
  	overflow: hidden;
  	vertical-align: top;
  	margin-bottom: 4px;
}

.main-menu li {
    list-style: none;
    background: #cf970c;
    overflow: hidden;
    background: #cf970c;
    margin-right: -4px;
    border-left: 2px solid #4c201f;
}

.main-menu li:hover {
	background: #885043;
}

.main-menu a {
	text-decoration: none;
	color: #f9e8b6;
	display: block;
	white-space: nowrap;
}

.b-right:before, .b-left:before, .b-right:after, .b-left:after {
  	position: absolute;
  	display: inline-block;
  	content: '';
  	width: 0px;
  	height: 0;
}
.b-right:before {
  	bottom: 0;
  	right: -10px;
  	border-left: 10px solid transparent;
  	border-right: 10px solid transparent;
  	border-bottom: 20px solid #ffd569;
}
.b-right:after {
  	bottom: -10px;
  	right: 0;
  	border-top: 10px solid transparent;
  	border-right: 20px solid #ffd569;
  	border-bottom: 10px solid transparent;
}
.b-left:before {
  	bottom: 0;
  	left: -10px;
  	border-left: 10px solid transparent;
  	border-right: 10px solid transparent;
  	border-bottom: 20px solid #ffd569;
}
.b-left:after {
  	bottom: -10px;
  	left: 0;
  	border-top: 10px solid transparent;
  	border-left: 20px solid...