JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="foo">
  <li>One</li>
  <li>Two</li>
  <li class="active">Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

CSS

ul {
  list-style-type: none;
  padding: 0;
}
li {
  background: lightgray;
  display: inline-block;
  margin: 0 1em;
  padding: .5em;
  border-radius: 30% 30% 0 0;
}

li.active {
  background: orange;
  position: relative;
}
li.active:before,
li.active:after {
  content: '';
  display: block;
  position: absolute;
  width: 14px; height: 15px;
}
li.active:before {
  right: 100%; bottom: 0;
  background-image: radial-gradient(circle at 0 0, transparent 14px, red 15px);
}
li.active:after {
  left: 100%; bottom: 0;
  background-image: radial-gradient(circle at 100% 0, transparent 14px, red 15px);
}

JavaScript

let tabs = [...foo.children]

const toggleTab = evt => {
  tabs.forEach(deactivate)
  activate(evt.target)
}

const deactivate = tab => tab.classList.remove('active')

const activate = tab => tab.classList.add('active')

tabs.forEach(tab => tab.onclick = toggleTab)