JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a href="#" class="navbar-brand">
    CompanyLogo
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".collapse">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse">
    <ul class="navbar-nav upper-controls">
      <li class="nav-item">
        <a class="nav-link" href="#">Country</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Language</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Sign up | Sign in</a>
      </li>
    </ul>
    <ul class="navbar-nav">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">
          Categories
        </a>
        <div class="dropdown-menu">
          <a class="dropdown-item">Cat 1</a>
          <a class="dropdown-item">Cat 2</a>
          <a class="dropdown-item">Cat 3</a>
          <a class="dropdown-item">Cat 4</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Live Auction</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Make Your Wish</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">How it works</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Purchase Bid Credits</a>
      </li>
     ...

CSS

/* center the logo */
.navbar {
  justify-content: center;
}

/* in order to center the logo */
.navbar .navbar-toggler {
  position: absolute;
  right: 1rem;
  top: .5rem;
}

/* center all navbar items */
.navbar-nav {
  align-items: center;
}

/* since it's expanding at lg */
@media(min-width: 992px) {
  /* in order to display in 2 rows */
  .navbar-expand-lg {
    flex-flow: column nowrap;
  }  

  /* same logic as the navbar-toggler above */
  .navbar-nav.upper-controls {
    position: absolute;
    right: 1rem;
    top: .5rem;
    font-size: 85%;
  }
}