JSFiddle - React, Tailwind, and code Playground

by RenaissanceDesign

HTML

<div class="tab">
Overview
</div>
<div>
Other stuff here
</div>

CSS

div {
  padding: 1em;
  border: 1px solid;
}

.tab {
  border-bottom: none;
  border-right: none;
  width: 200px;
  position: relative;
}

.tab:after {
  position: absolute;
  background-color: red;
  top: -1px;
  bottom: 0;
  left: 100%;
  content: "";
  width: 4em;
  background: linear-gradient(to top right, #fff calc(50% - 1px), black , #fff calc(50% + 1px) )
}