JSFiddle - React, Tailwind, and code Playground

HTML

<body>

  <div class="container">


    <div class="bx-pager bx-default-pager">

      <div class="bx-pager-item active">
        <a class="bx-pager-link " data-slide-index="0" href=""> 1. DIN EXPERT </a>
        <div class="arrow">

        </div>
      </div>

      <div class="bx-pager-item">
        <a class="bx-pager-link" data-slide-index="1" href=""> 2. VÅRA TJÄNSTER </a>
        <div class="arrow">

        </div>
      </div>

      <div class="bx-pager-item">
        <a class="bx-pager-link" data-slide-index="2" href=""> 3. CASE </a>
        <div class="arrow">

        </div>
      </div>

      <div class="bx-pager-item">
        <a class="bx-pager-link" data-slide-index="3" href=""> 4. KONTAKT </a>
        <div class="arrow">

        </div>
      </div>
    </div>
  </div>
</body>

SCSS

.container {
  max-width: 700px;
  margin: auto;
}

.bx-pager {
  display: flex;
  align-items: center;
  height: 34px;
  border-left: 1px solid #d68a3a;
  .bx-pager-item {
    display: flex;
    align-items: center;
    height: 100%;
    flex: 0 25%;
    border-top: 1px solid #d68a3a;
    border-bottom: 1px solid #d68a3a;
    .bx-pager-link {
      text-decoration: none;
      color: #222;
      font-size: 13px;
      flex: 1;
      padding-left: 16px;
      text-align: center;
    }
    .arrow {
      border: solid #d68a3a;
      display: inline-block;
      padding: 9px;
      border-width: 0 1px 1px 0;
      transform: translateY(15.5px) rotate(-45deg) skew(-15deg, -15deg) translateX(18px);
      background-color: #FFF;
    }
    &.active {
      background-color: #d68a3a;
      .bx-pager-link {
        color: white;
      }
      .arrow {
        background-color: #d68a3a;
      }
    }
  }
}