JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header_search">
поиск
</div>

<div class="header_nav">
навигация
</div>
<div class="header_content">
Лого и тд
</div>

CSS

.header_nav {
  height:40px;
  margin-right: 330px;}

.header_search {
  height:40px;
  float:right;
  width:300px;
  position:relative;
  border: 1px solid rgba(0,255,0,1);
  -webkit-box-shadow: 0 8px 9px -5px rgba(255,0,0,1) ;
  box-shadow: 0 0px 9px 5px rgba(255,0,0,1) ;
  background: rgba(99,166,233,0.5);}

.header_search::before {
  content: ''; 
  position: absolute;
  display: block;
  width: 30px;
  left: -49px;
  top:18px;
  margin: 0;
  padding: 20px;
  border: 0 solid rgba(0,255,0,1);
  border-bottom-width: 1px;
  -webkit-box-shadow: 0 8px 9px -5px rgba(255,0,0,1) ;
  box-shadow: 0 8px 9px -5px rgba(255,0,0,1) ;
  -webkit-transform: rotateZ(-30deg)   ;
  transform: rotateZ(140deg)   ;
  background: rgba(99,166,233,0.5);
}

.header_content {
  height: 100px;
  border: 1px solid rgba(0,255,0,1);
  -webkit-box-shadow: 0 8px 9px -5px rgba(255,0,0,1) ;
  box-shadow: 0 0px 9px 5px rgba(255,0,0,1) ;
  background:  rgba(99,166,233,0.5);}