BASIC-LIBRARY / SECTION / HEADER
Header Five

Preview
Code
Quick edit
Performance
Accelerate your team’s output with real-time feedback and smart automation tools.
Access Control
Define permissions and protect sensitive data with enterprise-grade identity management.
Cloud Sync
Automatically back up your data and access your workspace from any device securely.
Insights
Uncover key trends and make better decisions with advanced usage metrics and reports.
Tailored deployments New
Custom integrations and support for large-scale rollouts, designed for your infrastructure.
@import url("/template/basic-library/section/header/header-five/raw/styles.css");
<div class="bg-white lg:pb-12">
  <div
    class="ml-auto mr-auto mx-auto max-w-screen-2xl pl-4 pr-4 px-4 md:pl-8 md:pr-8 md:px-8"
  >
    <header
      class="flex items-center justify-between pt-4 pb-4 py-4 md:pt-8 md:pb-8 md:py-8"
    >
      <img
        class="max-w-full w-40 h-max object-center"
        src="https://tailsections.com/logo.png"
      />
      <nav class="hidden gap-12 lg:flex">
        <a
          href="#"
          class="transition duration-100 active:text-indigo-700 text-lg font-semibold text-gray-600 hover:text-indigo-500"
        >
          Dashboard
        </a>
        <a
          href="#"
          class="inline-flex items-center gap-1 text-lg font-semibold text-indigo-500"
        >
          <span data-node-handle="base-text" class="inline-block h-auto w-auto">
            Capabilities
          </span>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-5 w-5 text-gray-800"
            viewBox="0 0 20 20"
            fill="currentColor"
          >
            <path
              fill-rule="evenodd"
              d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
              clip-rule="evenodd"
            ></path>
          </svg>
        </a>
        <a
          href="#"
          class="transition duration-100 active:text-indigo-700 text-lg font-semibold text-gray-600 hover:text-indigo-500"
        >
          Plans
        </a>
        <a
          href="#"
          class="transition duration-100 active:text-indigo-700 text-lg font-semibold text-gray-600 hover:text-indigo-500"
        >
          Company
        </a>
      </nav>
      <div
        class="-ml-8 hidden flex-col gap-2.5 sm:flex-row sm:justify-center lg:flex lg:justify-start"
      >
        <a
          href="#"
          class="inline-block transition duration-100 active:text-indigo-600 rounded-lg pl-4 pr-4 px-4 pt-3 pb-3 py-3 text-center text-sm font-semibold text-gray-500 outline-none ring-indigo-300 hover:text-indigo-500 focus-visible:ring md:text-base"
        >
          Log in
        </a>
        <a
          href="#"
          class="inline-block transition duration-100 active:bg-indigo-700 rounded-lg bg-indigo-500 pl-8 pr-8 px-8 pt-3 pb-3 py-3 text-center text-sm font-semibold text-white outline-none ring-indigo-300 hover:bg-indigo-600 focus-visible:ring md:text-base"
        >
          Start free
        </a>
      </div>
      <button
        type="button"
        class="inline-flex active:text-gray-700 lg:hidden items-center gap-2 rounded-lg bg-gray-200 pl-2.5 pr-2.5 px-2.5 pt-2 pb-2 py-2 text-sm font-semibold text-gray-500 ring-indigo-300 hover:bg-gray-300 focus-visible:ring md:text-base"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-6 w-6"
          viewBox="0 0 20 20"
          fill="currentColor"
        >
          <path
            fill-rule="evenodd"
            d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
            clip-rule="evenodd"
          ></path>
        </svg>
        <span data-node-handle="base-text" class="inline-block h-auto w-auto">
          Menu
        </span>
      </button>
    </header>
    <div
      class="-mt-4 hidden overflow-hidden lg:block ml-auto mr-auto mx-auto w-full max-w-screen-sm rounded-lg border bg-white shadow-sm"
    >
      <div class="grid grid-cols-2 mt-6 mr-6 mb-10 ml-6 gap-8">
        <a href="#" class="group flex gap-4">
          <div
            class="transition duration-100 group-hover:bg-indigo-600 group-active:bg-indigo-700 flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-indigo-500 text-white shadow-lg md:h-12 md:w-12"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-6 w-6"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"
              ></path>
            </svg>
          </div>
          <div class>
            <div class="mb-1 font-semibold">Performance</div>
            <p class="text-sm text-gray-500">
              Accelerate your team&#x2019;s output with real-time feedback and
              smart automation tools.
            </p>
          </div>
        </a>
        <a href="#" class="group flex gap-4">
          <div
            class="transition duration-100 group-hover:bg-indigo-600 group-active:bg-indigo-700 flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-indigo-500 text-white shadow-lg md:h-12 md:w-12"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-6 w-6"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
              ></path>
            </svg>
          </div>
          <div class>
            <div class="mb-1 font-semibold">Access Control</div>
            <p class="text-sm text-gray-500">
              Define permissions and protect sensitive data with
              enterprise-grade identity management.
            </p>
          </div>
        </a>
        <a href="#" class="group flex gap-4">
          <div
            class="transition duration-100 group-hover:bg-indigo-600 group-active:bg-indigo-700 flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-indigo-500 text-white shadow-lg md:h-12 md:w-12"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-6 w-6"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"
              ></path>
            </svg>
          </div>
          <div class>
            <div class="mb-1 font-semibold">Cloud Sync</div>
            <p class="text-sm text-gray-500">
              Automatically back up your data and access your workspace from any
              device securely.
            </p>
          </div>
        </a>
        <a href="#" class="group flex gap-4">
          <div
            class="transition duration-100 group-hover:bg-indigo-600 group-active:bg-indigo-700 flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-indigo-500 text-white shadow-lg md:h-12 md:w-12"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-5 w-5"
              viewBox="0 0 20 20"
              fill="currentColor"
            >
              <path
                d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z"
              ></path>
            </svg>
          </div>
          <div class>
            <div class="mb-1 font-semibold">Insights</div>
            <p class="text-sm text-gray-500">
              Uncover key trends and make better decisions with advanced usage
              metrics and reports.
            </p>
          </div>
        </a>
      </div>
      <a
        href="#"
        class="block transition duration-100 active:bg-gray-200 bg-gray-50 pt-4 pr-4 pb-4 pl-4 hover:bg-gray-100"
      >
        <div class="mb-1 flex items-center gap-1.5">
          <span class="font-semibold leading-none">Tailored deployments</span>
          <span
            class="mt-0.5 rounded-full bg-indigo-100 pl-2 pr-2 px-2 pt-1 pb-1 py-1 text-xs font-semibold leading-none text-indigo-800"
          >
            New
          </span>
        </div>
        <p class="text-sm text-gray-500">
          Custom integrations and support for large-scale rollouts, designed for
          your infrastructure.
        </p>
      </a>
    </div>
  </div>
</div>
Header Five

Don’t Lose Your Edits!
