JSFiddle - React, Tailwind, and code Playground

HTML

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
</head>

<body>
  <div class="navigation">
    <nav class="navbar" role="navigation" aria-label="main navigation">
      <div class="navbar-brand">
        <a class="navbar-item" href="http://localhost:8000">
          <img src="https://bulma.io/images/bulma-logo.png" width="50">
        </a>
        <a class="navbar-item" href="http://localhost:8000">Sitename</a>
        <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navMenu">
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>
      </div>
      <div class="navbar-menu" id="navMenu">
        <div class="navbar-start">
          <a class="navbar-item" href="/link1.html">link 1</a>
          <a class="navbar-item" href="/link2.html">link 2</a>
          <a class="navbar-item" href="/link3.html">link 3</a>
          <a class="navbar-item" href="/link4.hmlt">link 4</a>
        </div>
      </div>
    </nav>
  </div>
</body>

CSS

.navbar {
  align-content: center;
  justify-content: center;
}