header view template to match Tailwind walker

header.blade.php

<header class="banner w-full bg-white border-grey-100 shadow-md">
  <div class="menu-wrap flex items-center flex-wrap justify-between p-3 w-full z-20 max-w-screen-xl
              sm:px-6 sm:py-5 lg:relative lg:mx-auto">
    <div class="flex items-center flex-no-shrink max-w-2/3">
        <a class="brand lg:block lg:pt-2" href="{{ home_url('/') }}">
          <img src="{{\Roots\asset('images/brand.png')}}" alt="Brand" 
            class="max-w-200">
        </a>
    </div>

    <div class="block lg:hidden">
      <button id="nav-toggle" class="flex items-center px-3 py-2 border border-black">
        <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="https://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
      </button>
    </div>

    <nav class="nav-primary relative w-full flex-grow uppercase hidden
                lg:flex lg:items-center lg:w-auto lg:block pt-6 lg:pt-0 lg:pl-6 lg:pt-5">
      @if (has_nav_menu('primary_navigation'))
        {!! wp_nav_menu($primaryMenu) !!}
      @endif
    </nav>
  </div>

</header>