Header Section Tailwind CSS
Header Section collection with Tailwind CSS
Tailwind CSS
Header Section with Dynamic Menu
Using Alpine JS for navbar toggle and big menu option showing
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>
</body>
</html>
Simple Header Section
Responsive menu with vanilla javascript
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>Simple Header - UI JAT</title>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body class="bg-white">
<div class="bg-white">
<header class="absolute inset-x-0 top-0 z-50">
<nav
class="flex 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">
<button
id="menuToggle"
type="button"
class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700"
>
<span class="sr-only">Open main 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="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
/>
</svg>
</button>
</div>
<div class="hidden lg:flex lg:gap-x-12">
<a href="#" class="text-sm/6 font-semibold text-gray-900"
>Product</a
>
<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 gap-2 lg:flex-1 lg:justify-end">
<a
href="#"
class="bg-black py-2 px-6 rounded-full text-sm/6 font-semibold text-gray-100 hover:bg-indigo-600"
>Log in <span aria-hidden="true">→</span></a
>
<a
href="#"
class="py-2 px-6 border rounded-full text-sm/6 font-semibold text-gray-900 hover:border-indigo-500"
>Sign Up <span aria-hidden="true">→</span></a
>
</div>
</nav>
<!-- Mobile menu -->
<div
id="mobileMenu"
class="hidden fixed inset-0 z-50 bg-white px-6 py-6 sm:max-w-sm 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
id="closeMenu"
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">
<div class="space-y-2 py-6">
<a
href="#"
class="block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
>Product</a
>
<a
href="#"
class="block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
>Features</a
>
<a
href="#"
class="block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
>Marketplace</a
>
<a
href="#"
class="block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
>Company</a
>
</div>
<div class="py-6">
<a
href="#"
class="block rounded-lg px-3 py-2.5 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
>Log in</a
>
</div>
</div>
</div>
</header>
</div>
<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>
Learning Platform Header
hoverable button with resposive menu with vanilla javascript
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>Learning Header - UI JAT</title>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body class="bg-white">
<header
class="sticky top-0 z-40 w-full backdrop-blur flex-none transition-colors duration-500 lg:z-50 lg:border-b lg:border-slate-900/10 dark:border-slate-50/[0.06] bg-white/95 supports-backdrop-blur:bg-white/60 dark:bg-transparent"
>
<div class="max-w-8xl mx-auto">
<div
class="py-4 border-b border-slate-900/10 lg:px-8 lg:border-0 dark:border-slate-300/10 px-4"
>
<div class="relative flex items-center">
<a
class="mr-3 flex-none w-[2.0625rem] overflow-hidden md:w-auto"
href="/"
>
<span class="sr-only">Fire Focus </span>
</a>
<a
href="#_"
class="inline-flex items-center justify-center px-5 py-3 text-white font-medium text-center text-indigo-100 border border-indigo-500 rounded-lg shadow-sm cursor-pointer bg-gradient-to-br from-purple-500 via-indigo-500 to-indigo-500"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-5 h-5 mr-2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z"
></path>
</svg>
<span class="relative font-bold">Fire Focus</span>
</a>
<div class="relative hidden lg:flex items-center ml-auto">
<nav
class="text-sm leading-6 font-semibold text-slate-700 dark:text-slate-200"
>
<ul class="flex space-x-8">
<li>
<a
class="hover:text-sky-500 dark:hover:text-sky-400"
href="/docs/installation"
>Innovation</a
>
</li>
<li>
<a
href="https://tailwindui.com/?ref=top"
class="hover:text-sky-500 dark:hover:text-sky-400"
>Learning</a
>
</li>
<li>
<a
class="hover:text-sky-500 dark:hover:text-sky-400"
href="/blog"
>Right Q</a
>
</li>
</ul>
</nav>
<div
class="flex items-center border-l border-slate-200 ml-6 pl-6 dark:border-slate-800"
>
<a
href="#_"
class="relative inline-block px-4 py-2 font-medium group"
>
<span
class="absolute inset-0 w-full h-full transition duration-200 ease-out transform translate-x-1 translate-y-1 bg-black group-hover:-translate-x-0 group-hover:-translate-y-0"
></span>
<span
class="absolute inset-0 w-full h-full bg-white border-2 border-black group-hover:bg-black"
></span>
<span class="relative text-black group-hover:text-white"
>Login</span
>
</a>
</div>
</div>
<!-- mobile navbar start-->
<div class="flex w-1/2 justify-end -my-1 lg:hidden">
<button
id="menuToggle"
type="button"
class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700"
>
<span class="sr-only">Open main 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="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
/>
</svg>
</button>
</div>
<!-- mobile navbar end-->
</div>
</div>
</div>
<!-- Mobile menu -->
<div
id="mobileMenu"
class="hidden fixed inset-0 z-50 bg-white px-6 py-6 sm:max-w-sm 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
id="closeMenu"
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">
<div class="space-y-2 py-6">
<a
href="#"
class="block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
>Product</a
>
<a
href="#"
class="block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
>Features</a
>
<a
href="#"
class="block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
>Marketplace</a
>
<a
href="#"
class="block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
>Company</a
>
</div>
<div class="py-6">
<a
href="#"
class="block rounded-lg px-3 py-2.5 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
>Log in</a
>
</div>
</div>
</div>
</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>
Dynamic Header Section
dynamic header with resposive menu with vanila js
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>Dynamic Header - UI JAT</title>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body class="bg-white">
<header
class="relative z-50 w-full flex-none text-sm font-semibold leading-6 text-slate-900"
>
<nav
aria-label="Global"
class="mx-auto max-w-container px-4 sm:px-6 lg:px-8"
>
<div class="relative flex items-center py-[2.125rem]">
<a class="mr-auto flex-none text-slate-900" href="/">
<span class="sr-only">Tailwind UI</span>
<img
class="h-8 w-auto"
src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600"
/>
</a>
<div class="flex lg:hidden">
<button
id="menuToggle"
type="button"
class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700"
>
<span class="sr-only">Open main 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="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
/>
</svg>
</button>
</div>
<div class="hidden lg:flex lg:items-center">
<a class="ml-8" href="/templates">Features</a>
<div
class="ml-2 hidden rounded-full bg-black px-1.5 py-0.5 text-xs text-white sm:block"
>
New
</div>
<a class="ml-8" href="/documentation">Documentation</a>
</div>
<div
class="hidden lg:ml-8 lg:flex lg:items-center lg:border-l lg:border-slate-900/15 lg:pl-8"
>
<a href="/login">Sign in</a
><a
class="inline-flex justify-center rounded-lg text-sm font-semibold py-2.5 px-4 bg-slate-900 text-white hover:bg-slate-700 -my-2.5 ml-8"
href="/all-access"
><span>Get all-access <span aria-hidden="true">→</span></span></a
>
</div>
</div>
</nav>
<!-- Mobile menu starts -->
<div
id="mobileMenu"
class="hidden fixed inset-0 z-50 bg-white px-6 py-6 sm:max-w-sm 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
id="closeMenu"
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">
<div class="space-y-2 py-6">
<a
href="#"
class="block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
>Product</a
>
<a
href="#"
class="block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
>Features</a
>
<a
href="#"
class="block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
>Marketplace</a
>
<a
href="#"
class="block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
>Company</a
>
</div>
<div class="py-6">
<a
href="#"
class="block rounded-lg px-3 py-2.5 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
>Log in</a
>
</div>
</div>
</div>
<!-- Mobile menu ends-->
</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>
Full width flyout menu
using alpine js for toggling the full with flying menu
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>With full width flyout menu</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>
<script>
// tailwind.config.js
module.exports = {
theme: {
extend: {
boxShadow: {
"b-md": "0 4px 6px -1px rgba(0, 0, 0, 0.1)", // bottom shadow only
},
},
},
plugins: [],
};
</script>
</head>
<body>
<header x-data="{ open: false }" class="bg-white">
<nav
class="mx-auto flex max-w-full 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 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>
<!-- current drop down-->
<!-- curren dropdown -->
</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>
<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="max-w-full mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-20"
>
<!-- Feature Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
<div
class="cursor-pointer group flex flex-col items-start w-full hover:bg-gray-100 p-4 rounded-lg transition"
>
<div
class="bg-gray-100 p-4 rounded-full mb-6 transition-colors duration-200"
>
<svg
class="size-8 text-gray-600 group-hover:text-indigo-500 transition-colors duration-200"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<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>
<h3 class="text-xl font-semibold text-gray-900 mb-2">Analytics</h3>
<p class="text-gray-600">
Get a better understanding where your traffic is coming from
</p>
</div>
<div
class="cursor-pointer group flex flex-col items-start w-full hover:bg-gray-100 p-4 rounded-lg transition"
>
<div
class="bg-gray-100 p-4 rounded-full mb-6 transition-colors duration-200"
>
<svg
class="size-8 text-gray-600 group-hover:text-indigo-500 transition-colors duration-200"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
aria-hidden="true"
data-slot="icon"
class="on bat blc"
>
<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"
></path>
</svg>
</div>
<h3 class="text-xl font-semibold text-gray-900 mb-2">Engagement</h3>
<p class="text-gray-600">
Speak directly to your customers with our engagement tool
</p>
</div>
<div
class="cursor-pointer group flex flex-col items-start w-full hover:bg-gray-100 p-4 rounded-lg transition"
>
<div
class="bg-gray-100 p-4 rounded-full mb-6 transition-colors duration-200"
>
<svg
class="size-8 text-gray-600 group-hover:text-indigo-500 transition-colors duration-200"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
aria-hidden="true"
data-slot="icon"
class="on bat blc"
>
<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"
></path>
</svg>
</div>
<h3 class="text-xl font-semibold text-gray-900 mb-2">Security</h3>
<p class="text-gray-600">
Your customers’ data will be safe and secure
</p>
</div>
<div
class="cursor-pointer group flex flex-col items-start w-full hover:bg-gray-100 p-4 rounded-lg transition"
>
<div
class="bg-gray-100 p-4 rounded-full mb-6 transition-colors duration-200"
>
<svg
class="size-8 text-gray-600 group-hover:text-indigo-500 transition-colors duration-200"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
aria-hidden="true"
data-slot="icon"
class="on bat blc"
>
<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"
></path>
</svg>
</div>
<h3 class="text-xl font-semibold text-gray-900 mb-2">
Integrations
</h3>
<p class="text-gray-600">
Your customers’ data will be safe and secure
</p>
</div>
</div>
<!-- Call to Action Section -->
<div
class="mt-20 grid grid-cols-3 divide-x divide-gray-900/5 bg-gray-50 border-b border-gray-200 shadow-b-md"
>
<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>
<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"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m21 7.5-9-5.25L3 7.5m18 0-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9"
/>
</svg>
View All Products
</a>
</div>
</div>
<!-- Mobile menu, show/hide based on menu open state. -->
<!-- flyout fullwidth menu section start -->
<!-- flyout fullwidth menu section end -->
</header>
</body>
</html>
Centered Logo Header Section
logo center in this header section with responsive design
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>Simple Header - UI JAT</title>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body class="bg-white">
<div class="bg-white">
<header class="absolute inset-x-0 top-0 z-50">
<nav
class="grid grid-cols-3 items-center justify-center p-6 lg:px-8"
aria-label="Global"
>
<div class="flex lg:hidden">
<button
id="menuToggle"
type="button"
class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700"
>
<span class="sr-only">Open main 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="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
/>
</svg>
</button>
</div>
<div class="hidden lg:flex lg:gap-x-12">
<a href="#" class="text-sm/6 font-semibold text-gray-900"
>Product</a
>
<a href="#" class="text-sm/6 font-semibold text-gray-900"
>Features</a
>
<a href="#" class="text-sm/6 font-semibold text-gray-900"
>Company</a
>
</div>
<div class="flex mx-auto items-center justify-center">
<a href="#" class="-m-1.5 p-1.5">
<span class="sr-only">Your Company</span>
<img
class="h-8 w-auto mx-auto block"
src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600"
alt=""
/>
</a>
</div>
<div class="flex justify-end">
<a
href="#"
class="py-2 px-6 md:border md:rounded-full text-sm/6 font-semibold text-gray-900 hover:border-indigo-500"
>Login In <span aria-hidden="true">→</span></a
>
</div>
</nav>
<!-- Mobile menu starts -->
<div
id="mobileMenu"
class="hidden fixed inset-0 z-50 bg-white px-6 py-6 sm:max-w-sm 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
id="closeMenu"
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">
<div class="space-y-2 py-6">
<a
href="#"
class="block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
>Product</a
>
<a
href="#"
class="block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
>Features</a
>
<a
href="#"
class="block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
>Marketplace</a
>
<a
href="#"
class="block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
>Company</a
>
</div>
<div class="py-6">
<a
href="#"
class="block rounded-lg px-3 py-2.5 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
>Log in</a
>
</div>
</div>
</div>
<!-- Mobile menu ends-->
</header>
</div>
<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