Tailwind CSS Header component

html
<header class="header">
  <div class="header-body">
    <div class="flex gap-2 items-center">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <circle cx="9" cy="9" r="7"/><circle cx="15" cy="15" r="7"/>
      </svg>
      <nav class="navbar navbar-x-start">
        <ul class="navbar-list gap-x-6">
          <li>List 1</li>
          <li>List 2</li>
          <li>List 3</li>
        </ul>
      </nav>
    </div>
  </div>
</header>