Footer
Mega footer with app badges
Six link columns and mobile download blocks
Six link columns and mobile download blocks
Design a large sitemap-style footer with Tailwind CSS for a consumer product. Use a neutral-50 background. The top row spans the full width: a wordmark and short strapline on the left, and on the right two app store badges drawn as bordered white blocks with a glyph and stacked labels. Below a hairline, a six-column link grid — Shop, Learn, Support, Company, Partners and Legal — each with a small uppercase heading and four to six muted links, collapsing to two columns on small screens and three on medium. Under another hairline, a payment and trust row: five bordered rounded pill placeholders holding card scheme names in small monospaced text, followed on the right by a line about secure checkout with a shield glyph. The final bar has the copyright, a registered address in muted text, and three social glyph links.<footer class="bg-neutral-50">
<div class="mx-auto max-w-6xl px-6 py-14">
<div class="flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between">
<div>
<p class="text-xl font-semibold tracking-tight text-neutral-900">Fernbrook</p>
<p class="mt-1.5 text-sm text-neutral-500">Kitchen tools built to be repaired, not replaced.</p>
</div>
<div class="flex gap-3">
<a href="#" class="flex items-center gap-3 rounded-xl border border-neutral-200 bg-white px-4 py-2.5 transition hover:border-neutral-300">
<span class="text-lg text-neutral-900"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m12 3 9 9-9 9-9-9 9-9Z"/><path d="m12 7 5 5-5 5-5-5 5-5Z"/></svg></span>
<span class="leading-tight"><span class="block text-[10px] uppercase tracking-widest text-neutral-400">Download on the</span><span class="block text-sm font-medium text-neutral-900">App Store</span></span>
</a>
<a href="#" class="flex items-center gap-3 rounded-xl border border-neutral-200 bg-white px-4 py-2.5 transition hover:border-neutral-300">
<span class="text-lg text-neutral-900"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m9 7 9 5-9 5V7Z" fill="currentColor" stroke="none"/></svg></span>
<span class="leading-tight"><span class="block text-[10px] uppercase tracking-widest text-neutral-400">Get it on</span><span class="block text-sm font-medium text-neutral-900">Google Play</span></span>
</a>
</div>
</div>
<div class="mt-12 grid gap-8 border-t border-neutral-200 pt-10 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-6">
<div>
<p class="text-xs font-semibold uppercase tracking-widest text-neutral-400">Shop</p>
<ul class="mt-4 space-y-2.5 text-sm text-neutral-500">
<li><a href="#" class="transition hover:text-neutral-900">Knives</a></li>
<li><a href="#" class="transition hover:text-neutral-900">Cookware</a></li>
<li><a href="#" class="transition hover:text-neutral-900">Boards</a></li>
<li><a href="#" class="transition hover:text-neutral-900">Spare parts</a></li>
<li><a href="#" class="transition hover:text-neutral-900">Gift cards</a></li>
</ul>
</div>
<div>
<p class="text-xs font-semibold uppercase tracking-widest text-neutral-400">Learn</p>
<ul class="mt-4 space-y-2.5 text-sm text-neutral-500">
<li><a href="#" class="transition hover:text-neutral-900">Sharpening guide</a></li>
<li><a href="#" class="transition hover:text-neutral-900">Care and storage</a></li>
<li><a href="#" class="transition hover:text-neutral-900">Materials</a></li>
<li><a href="#" class="transition hover:text-neutral-900">Recipes</a></li>
</ul>
</div>
<div>
<p class="text-xs font-semibold uppercase tracking-widest text-neutral-400">Support</p>
<ul class="mt-4 space-y-2.5 text-sm text-neutral-500">
<li><a href="#" class="transition hover:text-neutral-900">Track an order</a></li>
<li><a href="#" class="transition hover:text-neutral-900">Returns</a></li>
<li><a href="#" class="transition hover:text-neutral-900">Warranty</a></li>
<li><a href="#" class="transition hover:text-neutral-900">Repairs</a></li>
<li><a href="#" class="transition hover:text-neutral-900">Contact</a></li>
</ul>
</div>
<div>
<p class="text-xs font-semibold uppercase tracking-widest text-neutral-400">Company</p>
<ul class="mt-4 space-y-2.5 text-sm text-neutral-500">
<li><a href="#" class="transition hover:text-neutral-900">Our workshop</a></li>
<li><a href="#" class="transition hover:text-neutral-900">Sustainability</a></li>
<li><a href="#" class="transition hover:text-neutral-900">Careers</a></li>
<li><a href="#" class="transition hover:text-neutral-900">Stockists</a></li>
</ul>
</div>
<div>
<p class="text-xs font-semibold uppercase tracking-widest text-neutral-400">Partners</p>
<ul class="mt-4 space-y-2.5 text-sm text-neutral-500">
<li><a href="#" class="transition hover:text-neutral-900">Wholesale</a></li>
<li><a href="#" class="transition hover:text-neutral-900">Restaurants</a></li>
<li><a href="#" class="transition hover:text-neutral-900">Affiliates</a></li>
<li><a href="#" class="transition hover:text-neutral-900">Press</a></li>
</ul>
</div>
<div>
<p class="text-xs font-semibold uppercase tracking-widest text-neutral-400">Legal</p>
<ul class="mt-4 space-y-2.5 text-sm text-neutral-500">
<li><a href="#" class="transition hover:text-neutral-900">Terms</a></li>
<li><a href="#" class="transition hover:text-neutral-900">Privacy</a></li>
<li><a href="#" class="transition hover:text-neutral-900">Cookies</a></li>
<li><a href="#" class="transition hover:text-neutral-900">Accessibility</a></li>
</ul>
</div>
</div>
<div class="mt-10 flex flex-col gap-4 border-t border-neutral-200 pt-8 sm:flex-row sm:items-center sm:justify-between">
<div class="flex flex-wrap gap-2">
<span class="rounded-lg border border-neutral-200 bg-white px-3 py-1.5 font-mono text-[11px] text-neutral-500">VISA</span>
<span class="rounded-lg border border-neutral-200 bg-white px-3 py-1.5 font-mono text-[11px] text-neutral-500">MC</span>
<span class="rounded-lg border border-neutral-200 bg-white px-3 py-1.5 font-mono text-[11px] text-neutral-500">AMEX</span>
<span class="rounded-lg border border-neutral-200 bg-white px-3 py-1.5 font-mono text-[11px] text-neutral-500">iDEAL</span>
<span class="rounded-lg border border-neutral-200 bg-white px-3 py-1.5 font-mono text-[11px] text-neutral-500">PAYPAL</span>
</div>
<p class="flex items-center gap-2 text-xs text-neutral-500"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M12 3 4.5 6v5.5c0 4.7 3.2 7.7 7.5 9.5 4.3-1.8 7.5-4.8 7.5-9.5V6L12 3Z"/><path d="m9 12 2 2 4-4"/></svg> Checkout secured with 3-D Secure 2</p>
</div>
<div class="mt-8 flex flex-col gap-4 border-t border-neutral-200 pt-6 sm:flex-row sm:items-center sm:justify-between">
<p class="text-xs text-neutral-400">© 2026 Fernbrook Tools · Havenstraat 12, 3024 Rotterdam, NL · KVK 8811 4402</p>
<div class="flex gap-2">
<a href="#" class="grid h-8 w-8 place-items-center rounded-full border border-neutral-200 bg-white text-neutral-500 transition hover:text-neutral-900"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M5 4l14 16M19 4 5 20"/></svg></a>
<a href="#" class="grid h-8 w-8 place-items-center rounded-full border border-neutral-200 bg-white text-neutral-500 transition hover:text-neutral-900"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M7 9v11M7 5v.01M11 20v-6.5a4.5 4.5 0 0 1 9 0V20M11 9v11"/></svg></a>
<a href="#" class="grid h-8 w-8 place-items-center rounded-full border border-neutral-200 bg-white text-neutral-500 transition hover:text-neutral-900"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M15 21v-3.5c0-1 .1-1.4-.5-2 2.8-.3 5.7-1.4 5.7-6.2 0-1.4-.5-2.5-1.3-3.4.1-.3.6-1.7-.1-3.4 0 0-1.1-.3-3.6 1.3a12.4 12.4 0 0 0-6.5 0C6.2 2.2 5.1 2.5 5.1 2.5c-.7 1.7-.2 3.1-.1 3.4a5 5 0 0 0-1.3 3.4c0 4.8 2.9 5.9 5.7 6.2-.5.5-.6 1-.5 2V21"/><path d="M9 18c-2.7.8-2.7-1.3-3.8-1.6"/></svg></a>
</div>
</div>
</div>
</footer>