JSFiddle - React, Tailwind, and code Playground

by sol_b

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">
<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">

    <a class="navbar-item">
      Really Long Application Title
    </a>
    <a class="navbar-item is-hidden-touch">
      <img src="https://bulma.io/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
    </a>
    <button class="button navbar-burger" data-target="navMenu">
      <span></span>
      <span></span>
      <span></span>
    </button>
  </div>
  <div class="navbar-menu" id="navMenu">
    <div class="navbar-start">
      <a class="navbar-item">
  Item 1
</a>
      <a class="navbar-item">
  Item 2
</a>
      <a class="navbar-item">
  Item 3
</a>
      <a class="navbar-item">
  Item 4
</a>
      <a class="navbar-item">
  Item 5
</a>
    </div>

    <div class="navbar-end">
      <a class="navbar-item">
  Logged in
</a>
    </div>
  </div>
</nav>

CSS

.navbar-brand {
  width: 100%;
}

.navbar {
  flex-wrap: wrap;
}

.navbar-brand {
  justify-content: space-between;
}