Skip to content
Sign in

Footers for React and Tailwind

Footers do quiet, necessary work: links, legal pages, social accounts, newsletter sign-ups and a last look at the brand. These layouts keep all of that organised from a wide desktop down to a narrow phone. Check how the columns collapse, since that is where most footers break. Each one runs live on Layro and installs into your project, ready for your own links and small print.

Footer 2
Footer 2
Footer 3
Footer 3

About footers

Footers close every page with what doesn't fit elsewhere: grouped columns of links, legal pages, social accounts, a newsletter sign up, a language or theme switcher and the brand again. Some are minimal single rows, others large sections with a giant wordmark or a final call to action.

Group links by what people look for, such as product, company and help, and keep labels plain. Mark it up as a footer landmark, make links large enough to tap and check how the columns collapse on a phone, where most footers become a long scroll of links.

Frequently asked questions

Links to main pages grouped into a few columns, legal pages such as privacy and terms, contact details, social links and, if useful, a newsletter form or language switcher.

Lay the columns out with grid or flex and let them wrap to two columns and then one as the screen narrows. Accordions can collapse long groups on phones.

They help search engines find important pages, but stuffing them with keyword links doesn't help rankings. Keep them for navigation people actually use.

It's a good spot, since people who reach the bottom are engaged. Keep it to one field and a button, with a line on what they'll get.

Render it from the current date on the server or client so it updates itself, rather than typing a year by hand.

Use the footer element, label groups of links with headings or nav labels, give social icons accessible names and keep enough contrast on muted text.

Rarely. A fixed footer takes space from content on every screen. Keep it at the end of the page, and use a sticky bar only for a key action on mobile.

Explore more