Explore Tailwind CSS footer section examples to organize links, resources, and important information at the bottom of your pages. These blocks include a variety of layouts and styles for clear and structured navigation.
<footer class="max-w-7xl mx-auto px-6 lg:px-10">
<div class="py-10 grid grid-cols-2 md:grid-cols-4 lg:grid-cols-12 gap-10">
<div class="col-span-2 md:col-span-4 lg:col-span-4">
<a href="#" class="transition-opacity hover:opacity-80"><img src="https://themewagon.com/wp-content/themes/themewagon/dist/images/hb.png" alt="Hummingbird Logo" class="h-14 mb-2" /></a>
<p class="text-sm text-muted max-w-sm mb-6">Build faster interfaces with a modern Tailwind CSS system designed for performance, flexibility, and beautiful user experiences.</p>
<div class="flex gap-3">
<a href="https://github.com/hummingbirdui/hummingbird" target="_blank" class="btn btn-subtle-neutral btn-circle">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_33613_3537)"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.9702 0C4.45694 0 0 4.58333 0 10.2535C0 14.786 2.85571 18.6227 6.81735 19.9806C7.31265 20.0827 7.49408 19.76 7.49408 19.4885C7.49408 19.2508 7.47775 18.436 7.47775 17.5871C4.70429 18.1983 4.12673 16.3648 4.12673 16.3648C3.68102 15.1765 3.02061 14.871 3.02061 14.871C2.11286 14.2429 3.08673 14.2429 3.08673 14.2429C4.09367 14.3108 4.62204 15.2954 4.62204 15.2954C5.51327 16.8571 6.94939 16.4158 7.52714 16.1442C7.60959 15.4821 7.87388 15.0237 8.15449 14.7692C5.94245 14.5315 3.6151 13.6487 3.6151 9.71021C3.6151 8.58979 4.01102 7.67312 4.63837 6.96021C4.53939 6.70562 4.19265 5.65292 4.73755 4.24396C4.73755 4.24396 5.57939 3.97229 7.47755 5.29646C8.29022 5.07201 9.12832 4.95784 9.9702 4.95687C10.812 4.95687 11.6702 5.07583 12.4627 5.29646C14.361 3.97229 15.2029 4.24396 15.2029 4.24396C15.7478 5.65292 15.4008 6.70562 15.3018 6.96021C15.9457 7.67312 16.3253 8.58979 16.3253 9.71021C16.3253 13.6487 13.998 14.5144 11.7694 14.7692C12.1327 15.0917 12.4461 15.7027 12.4461 16.6704C12.4461 18.0454 12.4298 19.149 12.4298 19.4883C12.4298 19.76 12.6114 20.0827 13.1065 19.9808C17.0682 18.6225 19.9239 14.786 19.9239 10.2535C19.9402 4.58333 15.4669 0 9.9702 0Z" fill="currentColor"></path></g>
<defs>
<clipPath id="clip0_33613_3537"><rect width="20" height="20" fill="currentColor"></rect></clipPath>
</defs>
</svg>
</a>
<a href="https://www.facebook.com/HummingbirdUI/" target="_blank" class="btn btn-subtle-neutral btn-circle">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_34679_14824)"><path d="M13.2511 3.07031H11.0359C9.7213 3.07031 8.2591 3.62322 8.2591 5.52878C8.26551 6.19276 8.2591 6.82865 8.2591 7.5443H6.73828V9.96437H8.30616V16.9313H11.1872V9.91839H13.0888L13.2609 7.53751H11.1376C11.1376 7.53751 11.1423 6.47839 11.1376 6.17082C11.1376 5.41778 11.9211 5.46091 11.9683 5.46091C12.3411 5.46091 13.0661 5.46199 13.2522 5.46091V3.07031H13.2511Z" fill="currentColor"></path></g>
<defs>
<clipPath id="clip0_34679_14824"><rect width="20" height="20" fill="white"></rect></clipPath>
</defs>
</svg>
</a>
<a href="https://www.instagram.com/hummingbird.ui" target="_blank" class="btn btn-subtle-neutral btn-circle">
<svg width="20" height="20" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_34945_2628)">
<path d="M19.5457 14.76C19.499 15.7838 19.3278 16.3401 19.1857 16.7095C18.9946 17.1994 18.7669 17.5497 18.3974 17.917C18.0321 18.2845 17.6818 18.5117 17.1919 18.7006C16.8225 18.8449 16.2641 19.0166 15.2403 19.0654C14.1335 19.1142 13.8055 19.1246 10.9987 19.1246C8.19451 19.1246 7.86392 19.1142 6.75708 19.0654C5.73329 19.0166 5.17752 18.8449 4.80802 18.7006C4.31559 18.5117 3.96793 18.2845 3.60053 17.917C3.23054 17.5497 3.00274 17.1994 2.81438 16.7095C2.67217 16.3401 2.49836 15.7838 2.45422 14.76C2.40028 13.6531 2.3904 13.32 2.3904 10.5189C2.3904 7.71206 2.40028 7.38151 2.45422 6.27464C2.49836 5.25085 2.67217 4.69511 2.81438 4.3225C3.00274 3.83317 3.23054 3.48496 3.60053 3.11757C3.96793 2.75072 4.31559 2.52289 4.80802 2.33196C5.17752 2.18718 5.73329 2.018 6.75708 1.96923C7.86392 1.92043 8.19451 1.90797 10.9987 1.90797C13.8055 1.90797 14.1335 1.92043 15.2403 1.96923C16.2641 2.018 16.8225 2.18718 17.1919 2.33196C17.6818 2.52289 18.0321 2.75072 18.3974 3.11757C18.7669 3.48496 18.9946 3.83317 19.1857 4.3225C19.3278 4.69511 19.499 5.25085 19.5457 6.27464C19.5971 7.38151 19.6096 7.71206 19.6096 10.5189C19.6096 13.32 19.5971 13.6531 19.5457 14.76ZM21.4362 6.18852C21.3848 5.06972 21.2083 4.30537 20.9463 3.63962C20.6796 2.94893 20.3221 2.3636 19.7367 1.77826C19.154 1.19553 18.5686 0.837986 17.878 0.568161C17.2096 0.308691 16.4478 0.13017 15.3285 0.0814055C14.2092 0.0274251 13.8517 0.0175781 10.9987 0.0175781C8.14828 0.0175781 7.7882 0.0274251 6.66888 0.0814055C5.55217 0.13017 4.79089 0.308691 4.11944 0.568161C3.43136 0.837986 2.84602 1.19553 2.26329 1.77826C1.67795 2.3636 1.32041 2.94893 1.05109 3.63962C0.791618 4.30537 0.615199 5.06972 0.561219 6.18852C0.512454 7.30784 0.5 7.66588 0.5 10.5189C0.5 13.3693 0.512454 13.7268 0.561219 14.8461C0.615199 15.9628 0.791618 16.7267 1.05109 17.3956C1.32041 18.0836 1.67795 18.6716 2.26329 19.2543C2.84602 19.837 3.43136 20.1972 4.11944 20.4665C4.79089 20.7259 5.55217 20.9024 6.66888 20.9538C7.7882 21.0051 8.14828 21.0176 10.9987 21.0176C13.8517 21.0176 14.2092 21.0051 15.3285 20.9538C16.4478 20.9024 17.2096 20.7259 17.878 20.4665C18.5686 20.1972 19.154 19.837 19.7367 19.2543C20.3221 18.6716 20.6796 18.0836 20.9463 17.3956C21.2083 16.7267 21.3848 15.9628 21.4362 14.8461C21.4876 13.7268 21.5 13.3693 21.5 10.5189C21.5 7.66588 21.4876 7.30784 21.4362 6.18852Z" fill="currentColor"></path>
<path d="M17.8436 4.90737C17.8436 4.21032 17.2786 3.64746 16.5841 3.64746C15.8896 3.64746 15.3242 4.21032 15.3242 4.90737C15.3242 5.60187 15.8896 6.1647 16.5841 6.1647C17.2786 6.1647 17.8436 5.60187 17.8436 4.90737Z" fill="currentColor"></path>
<path d="M10.9848 13.9982C9.05528 13.9982 7.4896 12.4351 7.4896 10.5056C7.4896 8.57295 9.05528 7.00782 10.9848 7.00782C12.9149 7.00782 14.4826 8.57295 14.4826 10.5056C14.4826 12.4351 12.9149 13.9982 10.9848 13.9982ZM10.9848 5.11719C8.01047 5.11719 5.60156 7.53125 5.60156 10.5056C5.60156 13.4774 8.01047 15.8889 10.9848 15.8889C13.9591 15.8889 16.3706 13.4774 16.3706 10.5056C16.3706 7.53125 13.9591 5.11719 10.9848 5.11719Z" fill="currentColor"></path>
</g>
<defs>
<clipPath id="clip0_34945_2628"><rect width="21" height="21" fill="white" transform="translate(0.5 0.0175781)"></rect></clipPath>
</defs>
</svg>
</a>
<a href="https://x.com/Hummingbird_UI" target="_blank" class="btn btn-subtle-neutral btn-circle">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.3399 8.89916L16.5761 2.8125H15.3353L10.7888 8.09761L7.15734 2.8125H2.96875L8.46 10.8044L2.96875 17.1875H4.2096L9.01085 11.606L12.8461 17.1875H17.0347L11.3393 8.89916H11.3399ZM9.64019 10.8749L9.08388 10.0791L4.65666 3.74659H6.56279L10.1356 8.8569L10.6919 9.6527L15.3358 16.2957H13.4297L9.64019 10.8749Z" fill="currentColor"></path></svg>
</a>
<a href="https://discord.gg/3Uz3HU4z" target="_blank" class="btn btn-subtle-neutral btn-circle">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.3621 4.49766C15.1576 3.9462 13.886 3.55498 12.5798 3.33398C12.4011 3.65351 12.2394 3.98226 12.0953 4.31886C10.704 4.1092 9.28907 4.1092 7.89772 4.31886C7.75361 3.98229 7.59188 3.65355 7.41321 3.33398C6.10618 3.55685 4.83375 3.949 3.62802 4.50055C1.23433 8.04205 0.585439 11.4956 0.909884 14.9001C2.31169 15.9358 3.8807 16.7235 5.54873 17.2289C5.92432 16.7237 6.25668 16.1878 6.54226 15.6269C5.99983 15.4243 5.4763 15.1743 4.97771 14.8799C5.10893 14.7847 5.23727 14.6867 5.36128 14.5915C6.81205 15.2738 8.39549 15.6275 9.99868 15.6275C11.6019 15.6275 13.1853 15.2738 14.6361 14.5915C14.7615 14.6939 14.8899 14.792 15.0197 14.8799C14.5201 15.1748 13.9956 15.4252 13.4522 15.6283C13.7375 16.189 14.0698 16.7245 14.4458 17.2289C16.1152 16.7255 17.6854 15.9382 19.0875 14.9015C19.4682 10.9534 18.4372 7.53159 16.3621 4.49766ZM6.95322 12.8064C6.0491 12.8064 5.30216 11.9859 5.30216 10.9765C5.30216 9.96709 6.02315 9.1394 6.95034 9.1394C7.87753 9.1394 8.61871 9.96709 8.60285 10.9765C8.58699 11.9859 7.87465 12.8064 6.95322 12.8064ZM13.0441 12.8064C12.1386 12.8064 11.3945 11.9859 11.3945 10.9765C11.3945 9.96709 12.1155 9.1394 13.0441 9.1394C13.9728 9.1394 14.7082 9.96709 14.6923 10.9765C14.6765 11.9859 13.9656 12.8064 13.0441 12.8064Z" fill="currentColor"></path></svg>
</a>
</div>
</div>
<div class="col-span-1 lg:col-span-2">
<h4 class="text-xs font-bold uppercase tracking-widest mb-6">Product</h4>
<ul class="space-y-4 list-none p-0 mb-0">
<li><a href="#" class="text-sm text-muted hover:text-default no-underline transition-colors">UI Components</a></li>
<li><a href="#" class="text-sm text-muted hover:text-default no-underline transition-colors">Templates</a></li>
<li><a href="#" class="text-sm text-muted hover:text-default no-underline transition-colors">Design System</a></li>
</ul>
</div>
<div class="col-span-1 lg:col-span-2">
<h4 class="text-xs font-bold uppercase tracking-widest mb-6">Resources</h4>
<ul class="space-y-4 list-none p-0 mb-0">
<li><a href="#" class="text-sm text-muted hover:text-default no-underline transition-colors">Documentation</a></li>
<li><a href="#" class="text-sm text-muted hover:text-default no-underline transition-colors">Guides</a></li>
<li><a href="#" class="text-sm text-muted hover:text-default no-underline transition-colors">Help Center</a></li>
</ul>
</div>
<div class="col-span-1 lg:col-span-2">
<h4 class="text-xs font-bold uppercase tracking-widest mb-6">Company</h4>
<ul class="space-y-4 list-none p-0 mb-0">
<li><a href="#" class="text-sm text-muted hover:text-default no-underline transition-colors">About Us</a></li>
<li><a href="#" class="text-sm text-muted hover:text-default no-underline transition-colors">Careers</a></li>
<li><a href="#" class="text-sm text-muted hover:text-default no-underline transition-colors">Blog</a></li>
</ul>
</div>
<div class="col-span-1 lg:col-span-2">
<h4 class="text-xs font-bold uppercase tracking-widest mb-6">Legal</h4>
<ul class="space-y-4 list-none p-0 mb-0">
<li><a href="#" class="text-sm text-muted hover:text-default no-underline transition-colors">Privacy Policy</a></li>
<li><a href="#" class="text-sm text-muted hover:text-default no-underline transition-colors">Terms</a></li>
<li><a href="#" class="text-sm text-muted hover:text-default no-underline transition-colors">Licensing</a></li>
</ul>
</div>
</div>
<p class="py-5 border-t border-subtle text-xs text-muted text-center font-medium mb-0">© 2026 Hummingbird - All Rights Reserved.</p>
</footer>
<footer class="mx-auto max-w-7xl px-6">
<div class="flex flex-col items-center justify-between gap-10 py-6 border-b border-subtle lg:flex-row">
<div class="max-w-md text-center lg:text-left">
<a href="#"><img src="https://themewagon.com/wp-content/themes/themewagon/dist/images/hb.png" alt="hummingbird" class="h-14 mb-3 mx-auto lg:mx-0" /></a>
<p class="text-muted text-sm mb-0">Build faster interfaces with a modern Tailwind CSS system designed for performance, flexibility, and beautiful user experiences.</p>
</div>
<div class="w-full max-w-md">
<h4 class="text-sm font-semibold text-default mb-3 text-center lg:text-left">Subscribe to our newsletter</h4>
<div class="flex items-center gap-2 w-full max-w-90 mb-2 mx-auto lg:mx-0">
<input type="text" class="form-control-fill" placeholder="Email address" />
<button class="btn btn-subtle-primary shrink-0">Subscribe</button>
</div>
<p class="text-xs text-subtle text-center lg:text-left mb-0">No spam, just updates. Unsubscribe at any time.</p>
</div>
</div>
<div class="py-10 grid grid-cols-2 gap-8 sm:grid-cols-3 lg:grid-cols-5">
<div>
<h3 class="text-xs font-bold uppercase tracking-wider text-default mb-5">Product</h3>
<ul class="space-y-3 list-none p-0 mb-0">
<li><a href="#" class="text-sm text-muted hover:text-default no-underline transition-colors">UI Components</a></li>
<li><a href="#" class="text-sm text-muted hover:text-default no-underline transition-colors">Templates</a></li>
<li><a href="#" class="text-sm text-muted hover:text-default no-underline transition-colors">Design System</a></li>
<li><a href="#" class="text-sm text-muted hover:text-default no-underline transition-colors">Changelog</a></li>
</ul>
</div>
<div>
<h3 class="text-xs font-bold uppercase tracking-wider text-default mb-5">Resources</h3>
<ul class="space-y-3 list-none p-0 mb-0">
<li><a href="#" class="text-sm text-muted hover:text-default no-underline transition-colors">Documentation</a></li>
<li><a href="#" class="text-sm text-muted hover:text-default no-underline transition-colors">Guides</a></li>
<li><a href="#" class="text-sm text-muted hover:text-default no-underline transition-colors">API Reference</a></li>
<li><a href="#" class="text-sm text-muted hover:text-default no-underline transition-colors">Community</a></li>
</ul>
</div>
<div>
<h3 class="text-xs font-bold uppercase tracking-wider text-default mb-5">Company</h3>
<ul class="space-y-3 list-none p-0 mb-0">
<li><a href="#" class="text-sm text-muted hover:text-default no-underline transition-colors">About Us</a></li>
<li><a href="#" class="text-sm text-muted hover:text-default no-underline transition-colors">Blog</a></li>
<li><a href="#" class="text-sm text-muted hover:text-default no-underline transition-colors">Partners</a></li>
</ul>
</div>
<div>
<h3 class="text-xs font-bold uppercase tracking-wider text-default mb-5">Support</h3>
<ul class="space-y-3 list-none p-0 mb-0">
<li><a href="#" class="text-sm text-muted hover:text-default no-underline transition-colors">Help Center</a></li>
<li><a href="#" class="text-sm text-muted hover:text-default no-underline transition-colors">System Status</a></li>
<li><a href="#" class="text-sm text-muted hover:text-default no-underline transition-colors">Live Chat</a></li>
</ul>
</div>
<div>
<h3 class="text-xs font-bold uppercase tracking-wider text-default mb-5">Legal</h3>
<ul class="space-y-3 list-none p-0 mb-0">
<li><a href="#" class="text-sm text-muted hover:text-default no-underline transition-colors">Privacy Policy</a></li>
<li><a href="#" class="text-sm text-muted hover:text-default no-underline transition-colors">Terms of Service</a></li>
<li><a href="#" class="text-sm text-muted hover:text-default no-underline transition-colors">Security</a></li>
</ul>
</div>
</div>
<div class="flex flex-col-reverse items-center justify-between gap-6 border-t border-subtle py-3 md:flex-row">
<div class="flex flex-col items-center gap-2 md:items-start md:gap-4 md:flex-row">
<span class="text-sm text-muted">© 2026 Hummingbird Inc.</span>
<div class="vr h-4 hidden md:block"></div>
<button class="btn p-0 bg-transparent gap-1.5 text-sm font-normal opacity-70 hover:opacity-100 transition">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75
9.75-4.365 9.75-9.75-4.365-9.75-9.75-9.75z"
></path>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M2.25 12h19.5M12 2.25c2.485 2.7 3.75 6.15 3.75 9.75s-1.265 7.05-3.75 9.75
M12 2.25c-2.485 2.7-3.75 6.15-3.75 9.75s1.265 7.05 3.75 9.75"
></path>
</svg>
English (US)
</button>
</div>
<div class="flex items-center gap-2">
<a href="#" class="p-2 text-muted hover:text-default rounded-full transition" aria-label="GitHub">
<svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.042-1.416-4.042-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"></path></svg>
</a>
<a href="#" class="p-2 text-muted hover:text-default rounded-full transition" aria-label="Discord">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.3399 8.89916L16.5761 2.8125H15.3353L10.7888 8.09761L7.15734 2.8125H2.96875L8.46 10.8044L2.96875 17.1875H4.2096L9.01085 11.606L12.8461 17.1875H17.0347L11.3393 8.89916H11.3399ZM9.64019 10.8749L9.08388 10.0791L4.65666 3.74659H6.56279L10.1356 8.8569L10.6919 9.6527L15.3358 16.2957H13.4297L9.64019 10.8749Z" fill="currentColor"></path></svg>
</a>
<a href="#" class="p-2 text-muted hover:text-default rounded-full transition" aria-label="Discord">
<svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.06.06 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z"></path></svg>
</a>
</div>
</div>
</footer>
<footer class="mx-auto max-w-7xl px-6 lg:px-8 py-12">
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4 mb-8">
<div class="col-span-1 sm:col-span-2 card rounded-3xl p-8 border-subtle">
<a href="#"><img src="https://themewagon.com/wp-content/themes/themewagon/dist/images/hb.png" alt="hummingbird" class="h-14 self-start mb-2" /></a>
<p class="max-w-xs text-sm leading-6 text-muted">A flexible design system for modern developers. Ship polished UI with clarity and consistency.</p>
<div class="mt-8 flex gap-2">
<span class="badge badge-subtle-primary badge-md px-3 border-0">v1.0.0 Stable</span>
<span class="badge badge-subtle badge-md px-3 border-0">Open Source</span>
</div>
</div>
<div class="card rounded-3xl p-8 border-subtle">
<h3 class="text-sm font-bold uppercase tracking-wide text-default mb-6">Product</h3>
<ul class="space-y-3 p-0 mb-0 list-none">
<li><a href="#" class="text-sm text-muted hover:text-primary no-underline transition">Components</a></li>
<li><a href="#" class="text-sm text-muted hover:text-primary no-underline transition">Documentation</a></li>
<li><a href="#" class="text-sm text-muted hover:text-primary no-underline transition">Changelog</a></li>
</ul>
</div>
<div class="card rounded-3xl bg-dark dark:bg-warning border-transparent p-8">
<h3 class="text-sm font-bold uppercase tracking-wide text-contrast mb-6">Connect</h3>
<div class="flex flex-col gap-4">
<a href="https://x.com/Hummingbird_UI" target="_blank" class="flex items-center gap-3 text-sm text-contrast/80 hover:text-contrast no-underline">
<button class="btn btn-subtle-neutral btn-sm btn-square rounded-lg">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.3399 8.89916L16.5761 2.8125H15.3353L10.7888 8.09761L7.15734 2.8125H2.96875L8.46 10.8044L2.96875 17.1875H4.2096L9.01085 11.606L12.8461 17.1875H17.0347L11.3393 8.89916H11.3399ZM9.64019 10.8749L9.08388 10.0791L4.65666 3.74659H6.56279L10.1356 8.8569L10.6919 9.6527L15.3358 16.2957H13.4297L9.64019 10.8749Z" fill="currentColor"></path></svg>
</button>
Follow on X
</a>
<a href="https://github.com/hummingbirdui/hummingbird" target="_blank" class="flex items-center gap-3 text-sm text-contrast/80 hover:text-contrast no-underline">
<button class="btn btn-subtle-neutral btn-sm btn-square rounded-lg">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_33613_3537)"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.9702 0C4.45694 0 0 4.58333 0 10.2535C0 14.786 2.85571 18.6227 6.81735 19.9806C7.31265 20.0827 7.49408 19.76 7.49408 19.4885C7.49408 19.2508 7.47775 18.436 7.47775 17.5871C4.70429 18.1983 4.12673 16.3648 4.12673 16.3648C3.68102 15.1765 3.02061 14.871 3.02061 14.871C2.11286 14.2429 3.08673 14.2429 3.08673 14.2429C4.09367 14.3108 4.62204 15.2954 4.62204 15.2954C5.51327 16.8571 6.94939 16.4158 7.52714 16.1442C7.60959 15.4821 7.87388 15.0237 8.15449 14.7692C5.94245 14.5315 3.6151 13.6487 3.6151 9.71021C3.6151 8.58979 4.01102 7.67312 4.63837 6.96021C4.53939 6.70562 4.19265 5.65292 4.73755 4.24396C4.73755 4.24396 5.57939 3.97229 7.47755 5.29646C8.29022 5.07201 9.12832 4.95784 9.9702 4.95687C10.812 4.95687 11.6702 5.07583 12.4627 5.29646C14.361 3.97229 15.2029 4.24396 15.2029 4.24396C15.7478 5.65292 15.4008 6.70562 15.3018 6.96021C15.9457 7.67312 16.3253 8.58979 16.3253 9.71021C16.3253 13.6487 13.998 14.5144 11.7694 14.7692C12.1327 15.0917 12.4461 15.7027 12.4461 16.6704C12.4461 18.0454 12.4298 19.149 12.4298 19.4883C12.4298 19.76 12.6114 20.0827 13.1065 19.9808C17.0682 18.6225 19.9239 14.786 19.9239 10.2535C19.9402 4.58333 15.4669 0 9.9702 0Z" fill="currentColor"></path></g>
<defs>
<clipPath id="clip0_33613_3537"><rect width="20" height="20" fill="currentColor"></rect></clipPath>
</defs>
</svg>
</button>
Star on GitHub
</a>
</div>
</div>
</div>
<div class="flex items-center justify-between px-4">
<p class="text-xs font-medium text-muted mb-0">© 2026 Hummingbird.</p>
<div class="flex items-center gap-4 text-xs text-muted font-medium">
<a href="#" class="text-muted">Status</a>
<a href="#" class="text-muted">Help center</a>
</div>
</div>
</footer>
<footer class="mx-auto max-w-7xl px-6 lg:px-8 pt-6">
<div class="relative flex flex-col gap-16 lg:flex-row lg:items-start lg:justify-between overflow-hidden py-10">
<div class="max-w-xl z-10">
<h2 class="text-4xl sm:text-6xl mb-6">
Ready to build the
<span class="text-primary underline decoration-primary/30">future</span>
?
</h2>
<p class="text-lg text-muted mb-8">Join 5,000+ creators and engineers pushing the boundaries of what's possible on the web.</p>
<div class="flex gap-3">
<a href="#" class="btn btn-neutral btn-lg rounded-full px-8 dark:bg-white dark:text-black">Get Started</a>
<a href="#" class="btn btn-outline-neutral btn-lg rounded-full px-8">Contact Us</a>
</div>
</div>
<div class="grid grid-cols-2 gap-12 sm:grid-cols-3">
<div class="space-y-4">
<p class="text-sm font-bold uppercase tracking-widest">Social</p>
<ul class="space-y-3 text-sm list-none p-0 mb-0">
<li><a href="#" class="text-muted hover:text-primary no-underline transition">Twitter (X)</a></li>
<li><a href="#" class="text-muted hover:text-primary no-underline transition">Instagram</a></li>
<li><a href="#" class="text-muted hover:text-primary no-underline transition">LinkedIn</a></li>
</ul>
</div>
<div class="space-y-4">
<p class="text-sm font-bold uppercase tracking-widest">Studio</p>
<ul class="space-y-3 text-sm list-none p-0 mb-0">
<li><a href="#" class="text-muted hover:text-primary no-underline transition">Projects</a></li>
<li><a href="#" class="text-muted hover:text-primary no-underline transition">Lab</a></li>
<li><a href="#" class="text-muted hover:text-primary no-underline transition">Archive</a></li>
</ul>
</div>
</div>
<h1 class="absolute -left-10 -bottom-1/5 text-[12vw] font-black leading-none tracking-tighter text-muted/5 dark:text-muted/10 sm:text-[15vw] pointer-events-none">HUMMINGBIRD</h1>
</div>
<div class="flex flex-col sm:flex-row items-center justify-between gap-6 border-t border-subtle/60 py-8">
<div class="flex items-center gap-2">
<div class="size-1.75 rounded-full bg-primary"></div>
<span class="text-xs font-medium tracking-widest uppercase text-muted">Built in 2026</span>
</div>
<p class="text-xs text-muted mb-0">
© All Rights Reserved •
<a href="#" class="text-muted no-underline">Privacy</a>
•
<a href="#" class="text-muted no-underline">Terms</a>
</p>
</div>
</footer>
<footer>
<div class="border-b border-subtle bg-subtle/90">
<div class="mx-auto max-w-7xl px-6 py-10 lg:px-8">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-y-8">
<div class="flex items-center gap-4">
<div class="flex size-12 items-center justify-center rounded-full bg-info-lighter text-info">
<svg xmlns="http://www.w3.org/2000/svg" class="size-6" viewBox="0 0 24 24">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<circle cx="17" cy="18" r="2"></circle>
<circle cx="7" cy="18" r="2"></circle>
<path stroke-linecap="round" stroke-linejoin="round" d="M5 17.972c-1.097-.054-1.78-.217-2.268-.704s-.65-1.171-.704-2.268M9 18h6m4-.028c1.097-.054 1.78-.217 2.268-.704C22 16.535 22 15.357 22 13v-2h-4.7c-.745 0-1.117 0-1.418-.098a2 2 0 0 1-1.284-1.284C14.5 9.317 14.5 8.945 14.5 8.2c0-1.117 0-1.675-.147-2.127a3 3 0 0 0-1.926-1.926C11.975 4 11.417 4 10.3 4H2m0 4h6m-6 3h4"></path>
<path stroke-linecap="round" stroke-linejoin="round" d="M14.5 6h1.821c1.456 0 2.183 0 2.775.354c.593.353.938.994 1.628 2.276L22 11"></path>
</g>
</svg>
</div>
<div>
<h4 class="text-sm mb-1">Free Shipping</h4>
<span class="text-xs text-muted">On all orders over $99</span>
</div>
</div>
<div class="flex items-center gap-4">
<div class="flex size-12 items-center justify-center rounded-full bg-success-lighter text-success">
<svg xmlns="http://www.w3.org/2000/svg" class="size-6" viewBox="0 0 48 48">
<g fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="4">
<path d="M6 9.256L24.009 4L42 9.256v10.778A26.32 26.32 0 0 1 24.003 45A26.32 26.32 0 0 1 6 20.029z"></path>
<path stroke-linecap="round" d="m15 23l7 7l12-12"></path>
</g>
</svg>
</div>
<div>
<h4 class="text-sm mb-1">Secure Payment</h4>
<span class="text-xs text-muted">SSL Encrypted Checkout</span>
</div>
</div>
<div class="flex items-center gap-4">
<div class="flex size-12 items-center justify-center rounded-full bg-danger-lighter text-danger">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"></path></svg>
</div>
<div>
<h4 class="text-sm mb-1">30-Day Returns</h4>
<span class="text-xs text-muted">Hassle-free exchanges</span>
</div>
</div>
<div class="flex items-center gap-4">
<div class="flex size-12 items-center justify-center rounded-full bg-warning-lighter text-warning">
<svg xmlns="http://www.w3.org/2000/svg" class="size-6" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8h2a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-2v4l-4-4H9a2 2 0 0 1-1.414-.586m0 0L11 14h4a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2v4z"></path></svg>
</div>
<div>
<h4 class="text-sm mb-1">24/7 Support</h4>
<span class="text-xs text-muted">Live chat or call anytime</span>
</div>
</div>
</div>
</div>
</div>
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="grid grid-cols-12 py-10 gap-y-10">
<div class="col-span-12 lg:col-span-4">
<a href="#"><img src="https://themewagon.com/wp-content/themes/themewagon/dist/images/hb.png" alt="hummingbird" class="h-14 mb-2" /></a>
<p class="text-sm text-muted max-w-lg lg:max-w-xs mb-0">Your destination for premium streetwear and exclusive drops. Elevating your everyday aesthetic since 2026.</p>
</div>
<div class="col-span-6 md:col-span-3 lg:col-span-2">
<h3 class="text-sm uppercase tracking-wide mb-4">Shop</h3>
<ul class="space-y-4 list-none p-0 mb-0">
<li><a href="#" class="text-sm text-muted hover:text-primary no-underline">New Arrivals</a></li>
<li><a href="#" class="text-sm text-muted hover:text-primary no-underline">Best Sellers</a></li>
<li><a href="#" class="text-sm text-muted hover:text-primary no-underline">Collections</a></li>
<li><a href="#" class="text-sm text-muted hover:text-primary no-underline">Weekly Deals</a></li>
</ul>
</div>
<div class="col-span-6 md:col-span-3 lg:col-span-2">
<h3 class="text-sm uppercase tracking-wide mb-4">Help</h3>
<ul class="space-y-4 list-none p-0 mb-0">
<li><a href="#" class="text-sm text-muted hover:text-primary no-underline">Track Order</a></li>
<li><a href="#" class="text-sm text-muted hover:text-primary no-underline">Shipping Info</a></li>
<li><a href="#" class="text-sm text-muted hover:text-primary no-underline">Returns</a></li>
<li><a href="#" class="text-sm text-muted hover:text-primary no-underline">Order History</a></li>
</ul>
</div>
<div class="col-span-12 md:col-span-6 lg:col-span-4">
<h3 class="text-sm uppercase tracking-wide mb-4">Stay Updated</h3>
<p class="text-xs text-muted">Get early access to drops and exclusive offers.</p>
<div class="flex items-center gap-2 w-full max-w-90 mb-6">
<input type="text" class="form-control-fill" placeholder="Email address" />
<button class="btn btn-subtle-primary shrink-0">Subscribe</button>
</div>
<div class="flex gap-3">
<a href="https://www.facebook.com/HummingbirdUI/" target="_blank" class="btn btn-subtle-neutral btn-circle">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_34679_14824)"><path d="M13.2511 3.07031H11.0359C9.7213 3.07031 8.2591 3.62322 8.2591 5.52878C8.26551 6.19276 8.2591 6.82865 8.2591 7.5443H6.73828V9.96437H8.30616V16.9313H11.1872V9.91839H13.0888L13.2609 7.53751H11.1376C11.1376 7.53751 11.1423 6.47839 11.1376 6.17082C11.1376 5.41778 11.9211 5.46091 11.9683 5.46091C12.3411 5.46091 13.0661 5.46199 13.2522 5.46091V3.07031H13.2511Z" fill="currentColor"></path></g>
<defs>
<clipPath id="clip0_34679_14824"><rect width="20" height="20" fill="white"></rect></clipPath>
</defs>
</svg>
</a>
<a href="https://www.instagram.com/hummingbird.ui" target="_blank" class="btn btn-subtle-neutral btn-circle">
<svg width="20" height="20" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_34945_2628)">
<path d="M19.5457 14.76C19.499 15.7838 19.3278 16.3401 19.1857 16.7095C18.9946 17.1994 18.7669 17.5497 18.3974 17.917C18.0321 18.2845 17.6818 18.5117 17.1919 18.7006C16.8225 18.8449 16.2641 19.0166 15.2403 19.0654C14.1335 19.1142 13.8055 19.1246 10.9987 19.1246C8.19451 19.1246 7.86392 19.1142 6.75708 19.0654C5.73329 19.0166 5.17752 18.8449 4.80802 18.7006C4.31559 18.5117 3.96793 18.2845 3.60053 17.917C3.23054 17.5497 3.00274 17.1994 2.81438 16.7095C2.67217 16.3401 2.49836 15.7838 2.45422 14.76C2.40028 13.6531 2.3904 13.32 2.3904 10.5189C2.3904 7.71206 2.40028 7.38151 2.45422 6.27464C2.49836 5.25085 2.67217 4.69511 2.81438 4.3225C3.00274 3.83317 3.23054 3.48496 3.60053 3.11757C3.96793 2.75072 4.31559 2.52289 4.80802 2.33196C5.17752 2.18718 5.73329 2.018 6.75708 1.96923C7.86392 1.92043 8.19451 1.90797 10.9987 1.90797C13.8055 1.90797 14.1335 1.92043 15.2403 1.96923C16.2641 2.018 16.8225 2.18718 17.1919 2.33196C17.6818 2.52289 18.0321 2.75072 18.3974 3.11757C18.7669 3.48496 18.9946 3.83317 19.1857 4.3225C19.3278 4.69511 19.499 5.25085 19.5457 6.27464C19.5971 7.38151 19.6096 7.71206 19.6096 10.5189C19.6096 13.32 19.5971 13.6531 19.5457 14.76ZM21.4362 6.18852C21.3848 5.06972 21.2083 4.30537 20.9463 3.63962C20.6796 2.94893 20.3221 2.3636 19.7367 1.77826C19.154 1.19553 18.5686 0.837986 17.878 0.568161C17.2096 0.308691 16.4478 0.13017 15.3285 0.0814055C14.2092 0.0274251 13.8517 0.0175781 10.9987 0.0175781C8.14828 0.0175781 7.7882 0.0274251 6.66888 0.0814055C5.55217 0.13017 4.79089 0.308691 4.11944 0.568161C3.43136 0.837986 2.84602 1.19553 2.26329 1.77826C1.67795 2.3636 1.32041 2.94893 1.05109 3.63962C0.791618 4.30537 0.615199 5.06972 0.561219 6.18852C0.512454 7.30784 0.5 7.66588 0.5 10.5189C0.5 13.3693 0.512454 13.7268 0.561219 14.8461C0.615199 15.9628 0.791618 16.7267 1.05109 17.3956C1.32041 18.0836 1.67795 18.6716 2.26329 19.2543C2.84602 19.837 3.43136 20.1972 4.11944 20.4665C4.79089 20.7259 5.55217 20.9024 6.66888 20.9538C7.7882 21.0051 8.14828 21.0176 10.9987 21.0176C13.8517 21.0176 14.2092 21.0051 15.3285 20.9538C16.4478 20.9024 17.2096 20.7259 17.878 20.4665C18.5686 20.1972 19.154 19.837 19.7367 19.2543C20.3221 18.6716 20.6796 18.0836 20.9463 17.3956C21.2083 16.7267 21.3848 15.9628 21.4362 14.8461C21.4876 13.7268 21.5 13.3693 21.5 10.5189C21.5 7.66588 21.4876 7.30784 21.4362 6.18852Z" fill="currentColor"></path>
<path d="M17.8436 4.90737C17.8436 4.21032 17.2786 3.64746 16.5841 3.64746C15.8896 3.64746 15.3242 4.21032 15.3242 4.90737C15.3242 5.60187 15.8896 6.1647 16.5841 6.1647C17.2786 6.1647 17.8436 5.60187 17.8436 4.90737Z" fill="currentColor"></path>
<path d="M10.9848 13.9982C9.05528 13.9982 7.4896 12.4351 7.4896 10.5056C7.4896 8.57295 9.05528 7.00782 10.9848 7.00782C12.9149 7.00782 14.4826 8.57295 14.4826 10.5056C14.4826 12.4351 12.9149 13.9982 10.9848 13.9982ZM10.9848 5.11719C8.01047 5.11719 5.60156 7.53125 5.60156 10.5056C5.60156 13.4774 8.01047 15.8889 10.9848 15.8889C13.9591 15.8889 16.3706 13.4774 16.3706 10.5056C16.3706 7.53125 13.9591 5.11719 10.9848 5.11719Z" fill="currentColor"></path>
</g>
<defs>
<clipPath id="clip0_34945_2628"><rect width="21" height="21" fill="white" transform="translate(0.5 0.0175781)"></rect></clipPath>
</defs>
</svg>
</a>
<a href="https://x.com/Hummingbird_UI" target="_blank" class="btn btn-subtle-neutral btn-circle">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.3399 8.89916L16.5761 2.8125H15.3353L10.7888 8.09761L7.15734 2.8125H2.96875L8.46 10.8044L2.96875 17.1875H4.2096L9.01085 11.606L12.8461 17.1875H17.0347L11.3393 8.89916H11.3399ZM9.64019 10.8749L9.08388 10.0791L4.65666 3.74659H6.56279L10.1356 8.8569L10.6919 9.6527L15.3358 16.2957H13.4297L9.64019 10.8749Z" fill="currentColor"></path></svg>
</a>
</div>
</div>
</div>
<div class="border-t border-subtle py-4 flex flex-col md:flex-row items-center justify-between gap-2">
<p class="text-xs text-center md:text-start text-muted mb-0">© 2026 Hummingbird - All Rights Reserved.</p>
<div class="flex items-center gap-2">
<img src="https://www.svgrepo.com/show/328144/visa.svg" alt="visa" class="h-10" />
<img src="https://www.svgrepo.com/show/508701/mastercard-full.svg" alt="mastercard" class="h-10" />
<img src="https://www.svgrepo.com/show/508716/paypal.svg" alt="paypal" class="h-10" />
<img src="https://www.svgrepo.com/show/452108/stripe.svg" alt="stripe" class="h-10" />
<img src="https://www.svgrepo.com/show/508403/amex.svg" alt="american-express" class="h-10" />
</div>
</div>
</div>
</footer>