JSFiddle - React, Tailwind, and code Playground

by Mertakus

HTML

<div class="tabs2">
  <div class="tabs2-wrap">
    <div class="tablist">
      <div class="tabs2-item tabs2-isActive">Algemeen</div>
      <div class="tabs2-item">Vertrouwelijk</div>
      <div class="tabs2-item">Historie</div>
      <div class="tabs2-item">Kaasboer</div>
    </div>
  </div>
</div>

CSS

.tabs2 {
  border-bottom: 1px solid #e4e7ed;
}

.tabs2-wrap {
  margin-bottom: -1px;
  position: relative;
}

.tablist {
  transform: translateX(0px);
  border: 1px solid #e4e7ed;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  width: max-content;
}

.tabs2-item {
  padding: 0 20px;
  height: 40px;
  line-height: 40px;
  display: inline-block;
  position: relative;
  border-left: 1px solid #e4e7ed;
}

.tabs2-item:first-child {
  border-left: none;
}

.tabs2-isActive {
  border-bottom: 1px solid #fff;
}