JSFiddle - React, Tailwind, and code Playground

HTML

<header class="header">
  <div class="wrapper">
    <div class="header_wrapper">
      <div class="header_logo">
        <a href="/" class="header_logo-link">
          <img src="./img/svg/odigo-Logo.svg" alt="Discover Amazing places in Japan" class="header_logo-pic">
        </a>
      </div>
      <nav class="header_nav">
        <ul class="header_list">
          <li class="header_item">
            <a href="#!" class="header_list">Articles</a>
          </li>
          <li class="header_list">
            <a href="#!" class="header_list">Locations</a>
          </li>
          <li class="header_list">
            <a href="#!" class="header_list">Videos</a>
          </li>
          <li class="header_list">
            <a href="#!" class="header_list">Sign in</a>
          </li>

        </ul>
      </nav>
    </div>
  </div>
</header>

CSS

html {
   box-sizing: border-box;
 }

 *,
 *::before,
 *::after {
   box-sizing: inherit;
 }

 .wrapper {
   max-width: 1060px;
   margin: 0 auto;
 }

 body {
   font-family: 'Lato';
   font-style: normal;
   font-size: 16px;
   line-height: 1.2;
   font-weight: normal;
   color: #102746;
 }

 .header {
   background-color: black;
 }

 .header_wrapper {
   display: block;
   flex-wrap: wrap;
   align-items: flex-end;
   justify-content: space-between;

 }

 .header_list {
   display: block;
   flex-wrap: wrap;
 }

 .header_item {
   margin: 82px;
 }