Header Three

Launch App

@import url("/template/basic-library/section/header/header-three/raw/styles.css");

<header class="body-font text-gray-600">
  <div
    class="container ml-auto mr-auto mx-auto flex flex-wrap pt-5 pr-5 pb-5 pl-5 flex-col items-center max-w-screen-2xl md:flex-row"
  >
    <nav class="flex flex-wrap items-center text-base md:ml-auto lg:w-2/5">
      <a class="mr-5 hover:text-gray-900">Solutions</a>
      <a class="mr-5 hover:text-gray-900">Insights</a>
      <a class="mr-5 hover:text-gray-900">Pricing</a>
      <a class="hover:text-gray-900">Support</a>
    </nav>
    <img
      class="max-w-full w-40 h-max object-center"
      src="https://tailsections.com/logo.png"
    />
    <div class="inline-flex ml-5 lg:w-2/5 lg:justify-end lg:ml-0">
      <button
        class="inline-flex items-center bg-gray-100 border-0 pt-1 pb-1 py-1 pl-3 pr-3 px-3 focus:outline-none rounded text-base mt-4 hover:bg-gray-200 md:mt-0"
      >
        <span data-node-handle="base-text" class="inline-block h-auto w-auto">
          Launch App
        </span>
        <svg
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          class="w-4 h-4 ml-1"
          viewBox="0 0 24 24"
        >
          <path d="M5 12h14M12 5l7 7-7 7"></path>
        </svg>
      </button>
    </div>
  </div>
</header>