JSFiddle - React, Tailwind, and code Playground

HTML

<header class="header">
  <ul class="header__list header__list_first">
    <li class="header__item">
      <a class="header__item-link" href="#">Home</a>
    </li>
    <li class="header__item">
      <a class="header__item-link header__item-link_active" href="#">About</a>
    </li>
    <li class="header__item">
      <a class="header__item-link" href="#">Blog</a>
    </li>
  </ul>
  <ul class="header__list header__list_second">
    <li class="header__item">
      <a class="header__item-link" href="#">Menu</a>
    </li>
    <li class="header__item">
      <a class="header__item-link" href="#">Shop</a>
    </li>
    <li class="header__item">
      <a class="header__item-link" href="#">Contact</a>
    </li>
  </ul>
</header>

SCSS

.header {
  display: flex;
}

.header__list {
  display: flex;
  justify-content: space-between;
  max-width: 200px;
  width: 100%;
  &_first {
     .header__item-link {
       color: red;
     }
  }
  
  &_second {
    .header__item-link {
       color: green;
     }
  }
}