JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="kewa-menu">
      <li><a class="b-left" href="#">О компании</a></li>
      <li><a class="b-right" href="#">Услуги</a>
        <ul class="kewa-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="#">Сотрудники</a></li>
      <li><a class="b-right" href="#">Контакты</a></li>
</ul>

CSS

a{
  color:#0088cc;
  text-decoration:none;
}
.kewa-menu{
  position:relative;
  display:flex;
  list-style:none;
}
.kewa-menu .b-right, .kewa-menu .b-left{
  position:relative;
  display:inline-block;
  margin:2px 2px 3px 2px;
  padding:10px 20px;
  border-bottom:4px solid #ffd569;
  outline:3px solid #cf970c;
  overflow:hidden;
  vertical-align:top;
}
.b-right:before, .b-left:before, .b-right:after, .b-left:after{
  position:absolute;
  display:inline-block;
  content:'';
  width:0;
  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 #ffd569;
  border-bottom:10px solid transparent;
}
li .kewa-sub-menu {
  position:absolute;
  margin:0;
  padding:0;
  border-left:3px solid #cf970c;
  border-right:3px solid #cf970c;
  list-style:none;
  display:none;
  }
  .kewa-menu > li:hover .kewa-sub-menu {
  display:block;
}
 .kewa-sub-menu a{
  display:block;
  padding: 8px 14px;
  border-bottom:3px solid #cf970c;
}