JSFiddle - React, Tailwind, and code Playground

by Keith Henry

HTML

<div class="wrapper">
<div class="hex">
  blah
</div>

<div class="hex">
  blah
</div>
</div>

CSS

.wrapper {
   height: 50px;
   display: flex;
}

.hex {

  display: inline-flex;
  align-items:center;
  flex: 1;
  
  background: red;
  clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%, 10% 50%);
  
  border: 1px  solid black;
}