JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slant_tabs">
   <div class="slant_tab"><div class="arrow"></div><div class="slant_tab_inner">Tab A</div></div>
  <div class="slant_tab"><div class="arrow"></div><div class="slant_tab_inner">Tab B</div></div>
  <div class="slant_tab"><div class="arrow"></div><div class="slant_tab_inner">Tab C</div></div>
 </div>

CSS

.slant_tabs {
  display:flex;
}
.slant_tab {
      border-radius: 0px 0px 0px 0px;
      position: relative;
      line-height:1rem;
      background-color: #FFF;
      background:#DDD;
      border: 2px solid blue;
      border-bottom: none;
      border-right:none;
      margin-right:8px;
  }
  .slant_tab:after {
      display: block;
      content:" ";
      position: absolute;
      transform:skewX(45deg);
      -ms-transform:skewX(45deg);
      -webkit-transform:skewX(45deg);
      z-index: -1;
      background-color: #FFF;
      background:#DDD;
      height: 24px;
      top: -2px;
      border: 2px solid blue;
      border-bottom: none;
      border-left: none;
      width: 28px;
      right: -13px;
  }

  .slant_tab:hover {
    background:blue;
    color:white;
    z-index:10;
  }
  .slant_tab:hover::after {
    background:blue;
  }
  /* .slant_tab_inner element provides the full hoverable area for eachtab, including over slant area, because the slant part itself will not respond to hover. */
  .slant_tab_inner {
    border:none;
    padding: 4px 20px 4px 8px;
    margin-right:-20px;
    cursor:pointer;
  }