JSFiddle - React, Tailwind, and code Playground

HTML

<div class="hud">
  <div class="hud-card is-active">
    <div class="hud-card-content">
      <div class="hud-card-title">Title A</div>
    </div>
  </div>
  <div class="hud-card">
    <div class="hud-card-content">
      <div class="hud-card-title">Title B</div>
    </div>
  </div>
  <div class="hud-card">
    <div class="hud-card-content">
      <div class="hud-card-title">Title C</div>
    </div>
  </div>
  <div class="hud-card">
    <div class="hud-card-content">
      <div class="hud-card-title">Title D</div>
    </div>
  </div>
  <div class="hud-card">
    <div class="hud-card-content">
      <div class="hud-card-title">Title E</div>
    </div>
  </div>
  <div class="hud-card">
    <div class="hud-card-content">
      <div class="hud-card-title">Title F</div>
    </div>
  </div>
  <div class="hud-card">
    <div class="hud-card-content">
      <div class="hud-card-title">Title G</div>
    </div>
  </div>
</div>

SCSS

$foundation-palette: (
  primary: #263542,
  secondary: #3D4D5D,
  success: #39B54A,
  warning: #FFAE00,
  alert: #E6001F,
  tertiary: #F78200
);

$light-gray: #F3F3F3;
$medium-gray: #E3E3E3;
$global-radius: 4px;

@function get-color($color) {
   @return map-get($foundation-palette, $color);
}

.hud {
  width: 100%;
  display: flex;
  flex-direction: row;
  border: 1px solid $medium-gray;
  border-radius: $global-radius;
  background-color: #fff;
  margin-bottom: .6rem;
  padding: 4px;
  color: #626970;
  overflow-x: auto;
  position: relative;
  z-index: 2;

  .hud-card {
    padding: .3rem .8rem;
    margin-right: 4px;
    background-color: $light-gray;
    border-radius: $global-radius / 2;

    &.is-active {
      background-color: get-color(secondary);
      color: #fff;
      position: relative;

      .hud-card-title {
      }

      &:after {
        content: '';
        position: absolute;
        bottom: -15px;
        left: 0;
        right: 0;
        margin: auto;
        width: 0; 
        height: 0; 
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 15px solid get-color(secondary);
      }
    }

    &:hover:not(.is-active) {
      background-color: $medium-gray;
      color: get-color(primary);
      cursor: pointer;
    }
  }

  .hud-card-content {
    padding: .5rem;
  }

  .hud-card-title {
    text-transform: uppercase;
    font-size: 0.7857rem;
    line-height: 1.5;
  }
}