JSFiddle - React, Tailwind, and code Playground

by Chris Ball

HTML

<div class="navbar">
    <div class="navbar__brand">
        <div class="navbar__item"></div>
    </div>
    <div class="navbar__menu">
        <ul class="navbar__end">
            <li class="navbar__item">Test 1</li>
            <li class="navbar__item">Test 2</li>
            <li class="navbar__item">Test 3</li>
        </ul>
    </div>
</div>

CSS

.navbar {
  display: flex;
  align-item: center;
  flex-direction: row;
}

.navbar__brand {
  align-self: flex-start;
}

.navbar__toggle {
  display: block;
}
@media screen and (min-width: 600px) {
  .navbar__toggle {
    display: none;
  }
}

.navbar__start,
.navbar__middle,
.navbar__end {
  list-style: none;
}

.navbar__link {
  padding: 10px;
}