💡Premium Access

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">&rarr;</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>

Simple Header Section

Simple plain header in tailwind css

Header Section Tailwind CSS

                    
                        
                      <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">&rarr;</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">&rarr;</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>

Centered Logo Header Section

The centered brand logo in the header bar

Header Section Tailwind CSS

                    
                        
                      <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">&rarr;</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>

Dynamic Header Section

Variation in the dynamic header section with a responsive mobile menu bar

Header Section Tailwind CSS

                    
                        
                      <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>

With full width flyout menu with responsive mobile menu bar

using Alpine.js for the functionality

Header Section Tailwind CSS

With full width flyout menu with responsive mobile menu bar

                    
                        
                      <!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">&rarr;</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>

Learning Platform Header

With an expressive pushing button design + responsive mobile bar

Header Section Tailwind CSS

                    
                        
                      <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>

About Header Section

The header section of a website is the top area of a web page, typically containing the website's logo, navigation menu, and other elements, such as search bars or user accounts. It's a crucial part of the website's design as it provides a first impression and guides users through the site.

Here's a more detailed look:

Key elements of a website header:

Logo: The brand's visual identity, often a link back to the homepage.

Navigation Menu: Provides links to different sections or pages of the website.

Search Bar: Allows users to find specific content quickly.

User Account/Login: Enables users to manage their accounts or log in.

Call-to-Action Buttons: Encourage users to take a specific action, like signing up for a newsletter or making a purchase.

Why a good header is important:

First Impression:

The header is often the first thing a user sees, so it should be visually appealing and convey the website's purpose.

Navigation:

A well-designed header makes it easy for users to find what they're looking for and navigate the site.

Brand Recognition:

The logo and other elements in the header help users recognize and associate the website with the brand.

Call-to-Action:

Headers can include buttons or prompts to encourage users to take action, like making a purchase or signing up for a service.

Accessibility:

Headers should be designed to be accessible to all users, including those with disabilities

হেডার সেকশন সম্পর্কে
ওয়েবসাইটের হেডার সেকশন হলো একটি ওয়েব পৃষ্ঠার উপরের অংশ, যেখানে সাধারণত ওয়েবসাইটের লোগো, ন্যাভিগেশন মেনু এবং অন্যান্য উপাদান যেমন সার্চ বারের পাশাপাশি ইউজার অ্যাকাউন্ট সম্পর্কিত তথ্য থাকে। এটি ওয়েবসাইটের ডিজাইনের একটি গুরুত্বপূর্ণ অংশ, কারণ এটি প্রথম দৃষ্টিতে ব্যবহারকারীর উপর প্রভাব ফেলে এবং সাইটে নেভিগেশনে সাহায্য করে।

একটি ওয়েবসাইট হেডারের মূল উপাদানসমূহ:

লোগো:
ব্র্যান্ডের ভিজ্যুয়াল আইডেন্টিটি, যা সাধারণত হোমপেজে ফিরে যাওয়ার একটি লিঙ্ক হিসেবে কাজ করে।
ন্যাভিগেশন মেনু:
ওয়েবসাইটের বিভিন্ন অংশ বা পৃষ্ঠার লিঙ্ক সরবরাহ করে।
সার্চ বার:
ব্যবহারকারীদের দ্রুত নির্দিষ্ট কনটেন্ট খুঁজে পেতে সহায়তা করে।
ইউজার অ্যাকাউন্ট/লগইন:
ব্যবহারকারীদের তাদের অ্যাকাউন্ট পরিচালনা বা লগইন করার সুবিধা দেয়।
কল-টু-অ্যাকশন বোতাম:
ব্যবহারকারীদের একটি নির্দিষ্ট কাজ করার জন্য উৎসাহিত করে, যেমন নিউজলেটারে সাইন আপ করা বা কেনাকাটা করা।

একটি ভালো হেডার কেন গুরুত্বপূর্ণ:

প্রথম ছাপ:
হেডারই প্রথম জিনিস যা ব্যবহারকারী দেখে, তাই এটি দৃষ্টিনন্দন হওয়া উচিত এবং ওয়েবসাইটের উদ্দেশ্য বোঝাতে সক্ষম হওয়া উচিত।
নেভিগেশন:
একটি ভালোভাবে ডিজাইনকৃত হেডার ব্যবহারকারীদের সহজে কাঙ্ক্ষিত কনটেন্ট খুঁজে পেতে সহায়তা করে।
ব্র্যান্ড পরিচিতি:
হেডারের লোগো এবং অন্যান্য উপাদান ব্যবহারকারীদের ব্র্যান্ড চিনতে এবং মনে রাখতে সাহায্য করে।
কল-টু-অ্যাকশন:
হেডারে থাকা বোতাম বা প্রম্পট ব্যবহারকারীদের নির্দিষ্ট কিছু কাজ করার প্রতি আগ্রহী করে তোলে, যেমন সেবা গ্রহণ বা পণ্য কেনা।
অ্যাক্সেসিবিলিটি (প্রবেশযোগ্যতা):
হেডার ডিজাইন এমন হওয়া উচিত যাতে প্রতিবন্ধীসহ সকল ব্যবহারকারীর জন্য ব্যবহারযোগ্য হয়।

Home All Designs Connect Profile