Header Section Tailwind CSS
Header Section collection with Tailwind CSS
Tailwind CSS
Header Section with Dynamic Menu
Using Alpine JS for navbar toggle
Header Section Tailwind CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<script
defer
src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"
></script>
</head>
<body class="bg-white">
<header class="bg-white">
<nav
class="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8"
aria-label="Global"
>
<div class="flex lg:flex-1">
<a href="#" class="-m-1.5 p-1.5">
<span class="sr-only">Your Company</span>
<img
class="h-8 w-auto"
src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600"
alt=""
/>
</a>
</div>
<div class="flex lg:hidden">
<div x-data="{ open: false }">
<!-- Hamburger Menu Button -->
<button
@click="open = true"
class="lg:hidden text-gray-900 p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-300 cursor-pointer"
>
<span class="sr-only">Open menu</span>
<svg
class="size-6"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M4 6h16M4 12h16m-7 6h7"
/>
</svg>
</button>
<!-- Mobile Menu (Slide-over) -->
<div
x-show="open"
x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0 translate-x-full"
x-transition:enter-end="opacity-100 translate-x-0"
x-transition:leave="transition ease-in duration-150"
x-transition:leave-start="opacity-100 translate-x-0"
x-transition:leave-end="opacity-0 translate-x-full"
class="lg:hidden fixed inset-0 z-10 bg-gray-900 bg-opacity-50"
@click.away="open = false"
@keydown.escape.window="open = false"
>
<div
class="fixed inset-y-0 right-0 z-10 w-full max-w-sm overflow-y-auto bg-white px-6 py-6 sm:ring-1 sm:ring-gray-900/10"
>
<div class="flex items-center justify-between">
<a href="#" class="-m-1.5 p-1.5">
<span class="sr-only">Your Company</span>
<img
class="h-8 w-auto"
src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600"
alt=""
/>
</a>
<button
@click="open = false"
type="button"
class="-m-2.5 rounded-md p-2.5 text-gray-700"
>
<span class="sr-only">Close menu</span>
<svg
class="size-6"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6 18 18 6M6 6l12 12"
/>
</svg>
</button>
</div>
<div class="mt-6 flow-root">
<div class="-my-6 divide-y divide-gray-500/10">
<div class="space-y-2 py-6">
<div class="-mx-3" x-data="{ productOpen: false }">
<button
@click="productOpen = !productOpen"
type="button"
class="flex w-full items-center justify-between rounded-lg py-2 pr-3.5 pl-3 text-base font-semibold text-gray-900 hover:bg-gray-50"
aria-expanded="false"
>
Product
<svg
:class="productOpen ? 'rotate-180' : ''"
class="size-5 flex-none transition-transform duration-200"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z"
clip-rule="evenodd"
/>
</svg>
</button>
<!-- 'Product' sub-menu -->
<div
x-show="productOpen"
class="mt-2 space-y-2 pl-3"
x-collapse
>
<a
href="#"
class="block rounded-lg py-2 pr-3 pl-6 text-sm font-semibold text-gray-900 hover:bg-gray-50"
>Analytics</a
>
<a
href="#"
class="block rounded-lg py-2 pr-3 pl-6 text-sm font-semibold text-gray-900 hover:bg-gray-50"
>Engagement</a
>
<a
href="#"
class="block rounded-lg py-2 pr-3 pl-6 text-sm font-semibold text-gray-900 hover:bg-gray-50"
>Security</a
>
<a
href="#"
class="block rounded-lg py-2 pr-3 pl-6 text-sm font-semibold text-gray-900 hover:bg-gray-50"
>Integrations</a
>
<a
href="#"
class="block rounded-lg py-2 pr-3 pl-6 text-sm font-semibold text-gray-900 hover:bg-gray-50"
>Automations</a
>
<a
href="#"
class="block rounded-lg py-2 pr-3 pl-6 text-sm font-semibold text-gray-900 hover:bg-gray-50"
>Watch demo</a
>
<a
href="#"
class="block rounded-lg py-2 pr-3 pl-6 text-sm font-semibold text-gray-900 hover:bg-gray-50"
>Contact sales</a
>
</div>
</div>
<a
href="#"
class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold text-gray-900 hover:bg-gray-50"
>Features</a
>
<a
href="#"
class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold text-gray-900 hover:bg-gray-50"
>Marketplace</a
>
<a
href="#"
class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold text-gray-900 hover:bg-gray-50"
>Company</a
>
</div>
<div class="py-6">
<a
href="#"
class="-mx-3 block rounded-lg px-3 py-2.5 text-base font-semibold text-gray-900 hover:bg-gray-50"
>Log in</a
>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hidden lg:flex lg:gap-x-12">
<div x-data="{ open: false }" class="relative">
<button
@click="open = !open"
type="button"
class="flex items-center gap-x-1 text-sm/6 font-semibold text-gray-900 cursor-pointer"
aria-expanded="false"
>
Product
<svg
class="size-5 flex-none text-gray-400"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z"
clip-rule="evenodd"
/>
</svg>
</button>
<!--
'Product' flyout menu, show/hide based on flyout menu state.
Entering: "transition ease-out duration-200"
From: "opacity-0 translate-y-1"
To: "opacity-100 translate-y-0"
Leaving: "transition ease-in duration-150"
From: "opacity-100 translate-y-0"
To: "opacity-0 translate-y-1"
-->
<div
x-show="open"
x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0 translate-y-1"
x-transition:enter-end="opacity-100 translate-y-0"
x-transition:leave="transition ease-in duration-150"
x-transition:leave-start="opacity-100 translate-y-0"
x-transition:leave-end="opacity-0 translate-y-1"
@click.away="open = false"
class="absolute top-full -left-8 z-10 mt-3 w-screen max-w-md overflow-hidden rounded-3xl bg-white ring-1 shadow-lg ring-gray-900/5"
>
<div class="p-4">
<div
class="group relative flex items-center gap-x-6 rounded-lg p-4 text-sm/6 hover:bg-gray-50"
>
<div
class="flex size-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white"
>
<svg
class="size-6 text-gray-600 group-hover:text-indigo-600"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M10.5 6a7.5 7.5 0 1 0 7.5 7.5h-7.5V6Z"
/>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M13.5 10.5H21A7.5 7.5 0 0 0 13.5 3v7.5Z"
/>
</svg>
</div>
<div class="flex-auto">
<a href="#" class="block font-semibold text-gray-900">
Analytics
<span class="absolute inset-0"></span>
</a>
<p class="mt-1 text-gray-600">
Get a better understanding of your traffic
</p>
</div>
</div>
<div
class="group relative flex items-center gap-x-6 rounded-lg p-4 text-sm/6 hover:bg-gray-50"
>
<div
class="flex size-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white"
>
<svg
class="size-6 text-gray-600 group-hover:text-indigo-600"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15.042 21.672 13.684 16.6m0 0-2.51 2.225.569-9.47 5.227 7.917-3.286-.672ZM12 2.25V4.5m5.834.166-1.591 1.591M20.25 10.5H18M7.757 14.743l-1.59 1.59M6 10.5H3.75m4.007-4.243-1.59-1.59"
/>
</svg>
</div>
<div class="flex-auto">
<a href="#" class="block font-semibold text-gray-900">
Engagement
<span class="absolute inset-0"></span>
</a>
<p class="mt-1 text-gray-600">
Speak directly to your customers
</p>
</div>
</div>
<div
class="group relative flex items-center gap-x-6 rounded-lg p-4 text-sm/6 hover:bg-gray-50"
>
<div
class="flex size-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white"
>
<svg
class="size-6 text-gray-600 group-hover:text-indigo-600"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M7.864 4.243A7.5 7.5 0 0 1 19.5 10.5c0 2.92-.556 5.709-1.568 8.268M5.742 6.364A7.465 7.465 0 0 0 4.5 10.5a7.464 7.464 0 0 1-1.15 3.993m1.989 3.559A11.209 11.209 0 0 0 8.25 10.5a3.75 3.75 0 1 1 7.5 0c0 .527-.021 1.049-.064 1.565M12 10.5a14.94 14.94 0 0 1-3.6 9.75m6.633-4.596a18.666 18.666 0 0 1-2.485 5.33"
/>
</svg>
</div>
<div class="flex-auto">
<a href="#" class="block font-semibold text-gray-900">
Security
<span class="absolute inset-0"></span>
</a>
<p class="mt-1 text-gray-600">
Your customers’ data will be safe and secure
</p>
</div>
</div>
<div
class="group relative flex items-center gap-x-6 rounded-lg p-4 text-sm/6 hover:bg-gray-50"
>
<div
class="flex size-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white"
>
<svg
class="size-6 text-gray-600 group-hover:text-indigo-600"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 0 0 2.25-2.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v2.25A2.25 2.25 0 0 0 6 10.5Zm0 9.75h2.25A2.25 2.25 0 0 0 10.5 18v-2.25a2.25 2.25 0 0 0-2.25-2.25H6a2.25 2.25 0 0 0-2.25 2.25V18A2.25 2.25 0 0 0 6 20.25Zm9.75-9.75H18a2.25 2.25 0 0 0 2.25-2.25V6A2.25 2.25 0 0 0 18 3.75h-2.25A2.25 2.25 0 0 0 13.5 6v2.25a2.25 2.25 0 0 0 2.25 2.25Z"
/>
</svg>
</div>
<div class="flex-auto">
<a href="#" class="block font-semibold text-gray-900">
Integrations
<span class="absolute inset-0"></span>
</a>
<p class="mt-1 text-gray-600">
Connect with third-party tools
</p>
</div>
</div>
<div
class="group relative flex items-center gap-x-6 rounded-lg p-4 text-sm/6 hover:bg-gray-50"
>
<div
class="flex size-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white"
>
<svg
class="size-6 text-gray-600 group-hover:text-indigo-600"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
/>
</svg>
</div>
<div class="flex-auto">
<a href="#" class="block font-semibold text-gray-900">
Automations
<span class="absolute inset-0"></span>
</a>
<p class="mt-1 text-gray-600">
Build strategic funnels that will convert
</p>
</div>
</div>
</div>
<div
class="grid grid-cols-2 divide-x divide-gray-900/5 bg-gray-50"
>
<a
href="#"
class="flex items-center justify-center gap-x-2.5 p-3 text-sm/6 font-semibold text-gray-900 hover:bg-gray-100"
>
<svg
class="size-5 flex-none text-gray-400"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M2 10a8 8 0 1 1 16 0 8 8 0 0 1-16 0Zm6.39-2.908a.75.75 0 0 1 .766.027l3.5 2.25a.75.75 0 0 1 0 1.262l-3.5 2.25A.75.75 0 0 1 8 12.25v-4.5a.75.75 0 0 1 .39-.658Z"
clip-rule="evenodd"
/>
</svg>
Watch demo
</a>
<a
href="#"
class="flex items-center justify-center gap-x-2.5 p-3 text-sm/6 font-semibold text-gray-900 hover:bg-gray-100"
>
<svg
class="size-5 flex-none text-gray-400"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M2 3.5A1.5 1.5 0 0 1 3.5 2h1.148a1.5 1.5 0 0 1 1.465 1.175l.716 3.223a1.5 1.5 0 0 1-1.052 1.767l-.933.267c-.41.117-.643.555-.48.95a11.542 11.542 0 0 0 6.254 6.254c.395.163.833-.07.95-.48l.267-.933a1.5 1.5 0 0 1 1.767-1.052l3.223.716A1.5 1.5 0 0 1 18 15.352V16.5a1.5 1.5 0 0 1-1.5 1.5H15c-1.149 0-2.263-.15-3.326-.43A13.022 13.022 0 0 1 2.43 8.326 13.019 13.019 0 0 1 2 5V3.5Z"
clip-rule="evenodd"
/>
</svg>
Contact sales
</a>
</div>
</div>
</div>
<a href="#" class="text-sm/6 font-semibold text-gray-900">Features</a>
<a href="#" class="text-sm/6 font-semibold text-gray-900"
>Marketplace</a
>
<a href="#" class="text-sm/6 font-semibold text-gray-900">Company</a>
</div>
<div class="hidden lg:flex lg:flex-1 lg:justify-end">
<a href="#" class="text-sm/6 font-semibold text-gray-900"
>Log in <span aria-hidden="true">→</span></a
>
</div>
</nav>
<!-- Mobile menu, show/hide based on menu open state. -->
</header>
<script>
document.addEventListener("DOMContentLoaded", function () {
const menuToggle = document.getElementById("menuToggle");
const closeMenu = document.getElementById("closeMenu");
const mobileMenu = document.getElementById("mobileMenu");
menuToggle.addEventListener("click", function () {
mobileMenu.classList.toggle("hidden");
});
closeMenu.addEventListener("click", function () {
mobileMenu.classList.add("hidden");
});
// Close menu if clicking outside
document.addEventListener("click", function (event) {
if (
!mobileMenu.contains(event.target) &&
!menuToggle.contains(event.target)
) {
mobileMenu.classList.add("hidden");
}
});
});
</script>
</body>
</html>
Code copied to clipboard