JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header__row">
      <nav class="header__menu">
        <div class="menu__nav">
          <ul class="menu__list">
            <li><a href="" class="menu__link">Tour</a></li>
            <li><a href="" class="menu__link">Features</a></li>
            <li><a href="" class="menu__link">Pricing</a></li>
            <li><a href="" class="menu__link">Help</a></li>
            <li><a href="" class="menu__link">Contacts</a></li>
            <li><a href="" class="menu__link"><span>Get App</span></a></li>
          </ul>
        </div>
      </nav>
      <div class="header__logo">
        <img src="../img/logo/logo.png" alt="">
      </div>
    </div>

SCSS

.menu {
  &__nav {}
  &__list {
    display: flex;
    li{
      padding: 0px 41px;
      &:nth-child(3){
        padding: 0px 303px 0px 41px;
      }
      &:nth-child(4){
        padding: 0px 41px 0px 303px;
        border: red 3px solid;
      }
    }
  }
  &__link {
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 400;
    color: #26272d;
    &:nth-child(4) {
      opacity: 0.4;
      font-family: 'Lato', sans-serif;
      line-height: 1.2;
      color: #1b1c1e;
    }
  }
}