BASIC-LIBRARY / SECTION / HEADER
Header Six
Engagement
Boost user interaction with built-in campaigns and dynamic content strategies.
Account Safety
Protect credentials with two-factor authentication and session tracking options.
Data Hosting
Store files across multiple regions with built-in redundancy and failover.
Metrics
Gain visibility into team efficiency with visual dashboards and custom filters.
Streamline collaboration with dedicated workspaces for every department.
More @import url("/template/basic-library/section/header/header-six/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"
>
Overview
</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">
Solutions
</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"
>
Access
</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"
>
Join now
</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="hidden overflow-hidden lg:block w-full rounded-lg border bg-gray-50 shadow-sm"
>
<div
class="ml-auto mr-auto mx-auto flex max-w-screen-lg items-center gap-8 pt-8 pr-8 pb-8 pl-8"
>
<div class="grid grid-cols-2 w-2/3 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">Engagement</div>
<p class="text-sm text-gray-500">
Boost user interaction with built-in campaigns and dynamic
content strategies.
</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">Account Safety</div>
<p class="text-sm text-gray-500">
Protect credentials with two-factor authentication and session
tracking options.
</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">Data Hosting</div>
<p class="text-sm text-gray-500">
Store files across multiple regions with built-in redundancy and
failover.
</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">Metrics</div>
<p class="text-sm text-gray-500">
Gain visibility into team efficiency with visual dashboards and
custom filters.
</p>
</div>
</a>
</div>
<div class="overflow-hidden w-1/3 rounded-lg border">
<div class="h-48 bg-gray-100">
<img
src="https://images.unsplash.com/photo-1619118884592-11b151f1ae11?auto=format&q=75&fit=crop&w=320"
loading="lazy"
alt="Photo by Fakurian Design"
class="h-full w-full object-cover object-center"
/>
</div>
<div
class="flex items-center justify-between gap-2 bg-white pt-3 pr-3 pb-3 pl-3"
>
<p class="text-sm text-gray-500">
Streamline collaboration with dedicated workspaces for every
department.
</p>
<a
href="#"
class="inline-block transition duration-100 active:bg-gray-100 shrink-0 rounded-lg border bg-white pl-3 pr-3 px-3 pt-1 pb-1 py-1 text-sm font-semibold text-indigo-500 outline-none ring-indigo-300 hover:bg-gray-50 focus-visible:ring"
>
More
</a>
</div>
</div>
</div>
</div>
</div>
</div>
© 2025 tailsections.com. All rights reserved