JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<span class="con">
  <input type="text" placeholder="Search ..." />
</span>
</div>

CSS

div {
  padding:30px;
  background-color:#c11;
  
}

span.con:after {
  content: '';
position: absolute;
bottom: 0;
left: 0;
border-bottom: 13px solid #c11;
border-right: 14px solid transparent;
}
span.con:before {
  content: '';
position: absolute;
top: 0;
right: 0;
border-top: 13px solid #c11;
border-left: 14px solid transparent;
}
span.con {
  display: inline-block;
  position: relative;
}
input {
  display:block;
  background-color:#fff;
  border:0;
  height:30px;
  width:300px;
  padding:3px 10px;
}