Instant CSS
HomeTailwind ComponentsMulti-Column Footer
Tailwind CSS Component

Multi-Column Footer

A polished multi-column site footer with brand block, newsletter signup, four link columns (Product, Resources, Company, Legal), social icons, and a copyright bar. Fully responsive — collapses to two columns on tablet and stacks vertically on mobile.

Live Preview

About this component

A polished multi-column site footer with brand block, newsletter signup, four link columns (Product, Resources, Company, Legal), social icons, and a copyright bar. Fully responsive — collapses to two columns on tablet and stacks vertically on mobile.

What's included

  • Brand column with logo, tagline, and newsletter signup
  • Four link columns — Product, Resources, Company, Legal
  • 6 social icon links — X, GitHub, LinkedIn, YouTube, Discord, Instagram
  • Bottom bar with copyright and locale selector
  • Responsive — 4 columns on desktop, 2 on tablet, 1 on mobile
  • Dark-mode ready via Tailwind dark: variants
  • Inline SVG social icons, no icon library required
  • Zero custom CSS — pure Tailwind utility classes

Related searches

tailwind footertailwind footer componentmulti column footer tailwindsite footer tailwindnewsletter footer tailwindtailwind footer with logofree tailwind footerresponsive footer tailwind

Frequently asked questions

Common questions about using the multi-column footer component.

Is this component free to use?
Yes. Every Tailwind component on Instant CSS is free for personal and commercial projects with no attribution required. Just copy the markup and ship.
Do I need to install Tailwind to use this?
You need Tailwind CSS available on your page — either through the Tailwind CLI, the Tailwind CDN script, or a framework integration (Next.js, Astro, Remix, etc.). The component is just HTML with utility classes.
Is this responsive on mobile and tablet?
Yes. Every component is built with Tailwind responsive prefixes (sm:, md:, lg:, xl:) so it adapts gracefully from phones up to large desktops.
Can I drop this into React, Vue, Svelte, or Astro?
Yes. The component is plain HTML — paste it into any framework component and replace event handlers (onclick, etc.) with framework equivalents (onClick, @click, on:click).
Does it support dark mode?
Yes. Components use Tailwind's dark: variant. Make sure your project enables darkMode: "class" or darkMode: "media" in tailwind.config.js, then the component picks up the user's theme automatically.
How do I wire the newsletter form?
Replace the form's action attribute with your provider URL (Mailchimp, Buttondown, ConvertKit, Beehiiv, etc.) and method="post". The styled input and button stay the same.
Can I add or remove link columns?
Yes. The columns are individual <div> blocks inside the four-column grid. Add or remove columns and adjust the grid-cols-* utility (e.g. lg:grid-cols-5) accordingly.

More Tailwind Components

Other free Tailwind components in the library.

View all →
Tailwind

Modern Header / Navbar

A clean, modern sticky header with logo, nav links, search, theme toggle, and a primary CTA. Includes a fully functional mobile drawer with a slide-in animation. Built with pure Tailwind utility classes.

View
Tailwind

Modern SaaS Hero Section

A conversion-focused, modern SaaS hero with eyebrow announcement pill, large headline with gradient highlight, subheadline, dual CTAs, social proof avatars + rating, and a glass-effect dashboard mockup. Includes a soft radial gradient background and decorative blur orbs.

View
Tailwind

3-Tier Pricing Table

A modern 3-tier pricing table — Free, Pro (highlighted as "Most Popular"), and Business — with monthly pricing, feature checklists, and CTA buttons. Includes a billing-cycle toggle, gradient accent on the highlighted plan, and a money-back guarantee banner below.

View

Ready to use this component?

Open it in our editor and customize it to match your brand in minutes.

Browse all Tailwind components

See every free Tailwind component in the library.

Browse all