Header Component

A semantic, accessible header component built with HTML5 and Tailwind CSS. Structure site headers with branding, navigation, and action elements in flexible layouts. Supports sticky positioning, responsive menus, and theme-aware styling for modern, SEO-friendly page headers.
Header

<header class="header">
  <div class="header-content">
    <div class="header-start">
      <a class="flex items-center" title="frutjam">
        <svg width="32" height="32" class="mr-3 h-8" viewBox="0 0 240.000000 240.000000"
          preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg">
          <desc>Frutjam logo</desc>
          <rect x="34.468" y="34.397" width="171.631" height="171.064" stroke="rgb(0, 0, 0)"
            fill="rgb(255, 255, 255)"></rect>
          <g transform="translate(0.000000,240.000000) scale(0.100000,-0.100000)" fill="#1529ff" stroke="none">
            <path d="M723 2319 c-225 -16 -369 -68 -471 -171 -92 -91 -136 -195 -164 -387 -18 -120 -18 -1002 0 -1122 28 -192 72 -298 163 -388 88 -88 192 -133 374 -162 105 -16 823 -24 1012 -10 305 22 448 80 557 225 108 145 136 327 136 896 0 496 -19 671 -90 816 -51 106 -118 173 -224 224 -97 47 -188 67 -373 80 -160 11 -756 11 -920 -1z m909 -433 c180 -40 266 -124 306 -300 23 -104 23 -698 0 -802 -41 -182 -133 -267 -329 -305 -87 -17 -707 -18 -806 -1 -201 34 -300 122 -340 304 -23 106 -24 700 0 804 20 92 55 161 106 207 110 99 227 118 706 112 207 -3 309 -8 357 -19z"></path>
            <path d="M951 1535 c-48 -15 -85 -45 -109 -90 -14 -25 -17 -63 -17 -230 0 -110 3 -212 8 -227 13 -48 64 -96 120 -113 72 -21 422 -21 494 0 56 17 107 65 120 113 10 35 10 399 0 434 -13 48 -64 96 -120 113 -68 20 -431 20 -496 0z"></path>
          </g>
        </svg>
        <span>Frutjam</span>
      </a>
    </div>
    <div class="header-center">
      <nav class="navbar hidden lg:flex">
        <ul class="navbar-list gap-x-6">
          <li><a class="link link-xs link-hover">About</a></li>
          <li><a class="link link-xs link-hover">Pricing</a></li>
          <li><a class="link link-xs link-hover">Services</a></li>
          <li><a class="link link-xs link-hover">Blog</a></li>
        </ul>
      </nav>
    </div>
    <div class="header-end">
      <div class="hidden lg:flex gap-x-2">
        <a class="btn btn-outline btn-sm">Login</a>
        <a class="btn btn-neutral btn-sm">Sign up</a>
      </div>
      <div class="lg:hidden">
        <button type="button" class="btn btn-sm btn-ghost" onclick="headerToggleMenu3.show()">
          <span class="sr-only">Menu</span>
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <line x1="4" x2="20" y1="10" y2="10"></line>
            <line x1="4" x2="20" y1="20" y2="20"></line>
          </svg>
        </button>
        <dialog class="drawer drawer-bottom" id="headerToggleMenu3">
          <div class="drawer-content">
            <ul class="menu p-4">
              <li><a class="menu-item">About</a></li>
              <li>
                <div class="accordion accordion-flush">
                  <details>
                    <summary>Resources</summary>
                    <div class="accordion-content">
                      <ul>
                        <li><a class="menu-item">Help center</a></li>
                        <li><a class="menu-item">Products</a></li>
                      </ul>
                    </div>
                  </details>
                </div>
              </li>
              <li><a class="menu-item">Pricing</a></li>
            </ul>
          </div>
          <button type="button" class="drawer-backdrop" onclick="headerToggleMenu3.close()">Close Drawer via Backdrop</button>
        </dialog>
      </div>
    </div>
  </div>
</header>
View Code