JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="navbar">
  <a href="#"><img src="https://cdn.discordapp.com/attachments/714128376884887644/783384657366482954/Double20Hospital20Doors20push20plate20and20kickplate.png" alt=""></a>
  <div class="wrapper">
    <ul class="main-nav" id="js-menu">
      <li>
        <a href="#" class="nav-links">Home</a>
      </li>
      <li>
        <a href="#" class="nav-links">Products</a>
      </li>
      <li>
        <a href="#" class="nav-links">About Us</a>
      </li>
    </ul>
    <ul class="ul2">
      <li>
        <a href="#" class="nav-links">Contact Us</a>
      </li>
      <li>
        <a href="#" class="nav-links">Blog</a>
      </li>
    </ul>
  </div>
</nav>

CSS

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

ul {
  list-style-type: none;
}

.nav-links,
.logo {
  text-decoration: none;
  color: #000;
}

.logo {
  max-width: 80%;
  width: 20%;
  height: 20%;
}

.navbar img {
  width: auto;
  height: 30px;
}

.navbar {
  padding: 20px;
  height: 50vh;
}

.navbar,
ul {
  display: flex;
  flex-direction: row;
}

ul li {
  padding: 0 5px;
}

.wrapper {
  display: flex;
  justify-content: space-between;
  width: 100%;
}