Footers
10 components in this category
Footers 10 · Status and language
A footer with a status badge and a language selector next to the legal links.
<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
<footer class='border-t border-neutral-200 bg-white'><div class='mx-auto max-w-6xl px-6 py-10'><div class='flex flex-wrap items-center justify-between gap-6'><img src='https://raw.githubusercontent.com/Tolaj/windcraft/main/docs/media/logo.png' alt='Windcraft' class='h-5 w-auto'><div class='flex flex-wrap items-center gap-4 text-sm'><span class='inline-flex items-center gap-2 rounded-full border border-neutral-200 px-3 py-1 text-neutral-600'><span class='h-2 w-2 rounded-full bg-black'></span>All systems normal</span><select class='rounded-lg border border-neutral-300 bg-white px-3 py-1.5 text-neutral-700'><option>English</option><option>Deutsch</option><option>Français</option></select></div></div><div class='mt-8 flex flex-wrap items-center justify-between gap-3 border-t border-neutral-200 pt-6 text-xs text-neutral-500'><p>© 2026 Windcraft</p><nav class='flex gap-5'><a href='#'>Privacy</a><a href='#'>Terms</a><a href='#'>Security</a></nav></div></div></footer>
Footers 09 · Brand and three columns on grey
Light grey footer: logo, a short description and social links on the left, link columns on the right.
<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
<footer class='bg-neutral-100'><div class='mx-auto grid max-w-6xl gap-12 px-6 py-16 md:grid-cols-[1fr_2fr]'><div><img src='https://raw.githubusercontent.com/Tolaj/windcraft/main/docs/media/logo.png' alt='Windcraft' class='h-6 w-auto'><p class='mt-4 max-w-xs text-sm text-neutral-600'>Draw or paste a page, edit it visually, keep plain HTML.</p><div class='mt-6 flex gap-3'><a href='#' class='grid h-9 w-9 place-items-center rounded-full bg-black text-xs font-semibold text-white'>GH</a><a href='#' class='grid h-9 w-9 place-items-center rounded-full bg-black text-xs font-semibold text-white'>X</a></div></div><div class='grid grid-cols-3 gap-8 text-sm'><div><h4 class='font-semibold text-black'>Product</h4><ul class='mt-4 space-y-3 text-neutral-600'><li><a href='#'>Editor</a></li><li><a href='#'>Library</a></li><li><a href='#'>Pricing</a></li></ul></div><div><h4 class='font-semibold text-black'>Learn</h4><ul class='mt-4 space-y-3 text-neutral-600'><li><a href='#'>Docs</a></li><li><a href='#'>Guides</a></li><li><a href='#'>FAQ</a></li></ul></div><div><h4 class='font-semibold text-black'>Legal</h4><ul class='mt-4 space-y-3 text-neutral-600'><li><a href='#'>Privacy</a></li><li><a href='#'>Terms</a></li></ul></div></div></div></footer>
Footers 08 · Huge logo
Dark footer with link columns on top and a very large white logo along the bottom.
<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
<footer class='overflow-hidden bg-black'><div class='mx-auto max-w-6xl px-6 pt-16'><div class='grid gap-10 sm:grid-cols-3'><div><h3 class='text-sm font-semibold text-white'>Product</h3><ul class='mt-4 space-y-3 text-sm text-neutral-400'><li><a href='#'>Editor</a></li><li><a href='#'>Pricing</a></li></ul></div><div><h3 class='text-sm font-semibold text-white'>Resources</h3><ul class='mt-4 space-y-3 text-sm text-neutral-400'><li><a href='#'>Docs</a></li><li><a href='#'>GitHub</a></li></ul></div><div><h3 class='text-sm font-semibold text-white'>Contact</h3><ul class='mt-4 space-y-3 text-sm text-neutral-400'><li><a href='#'>Email</a></li><li><a href='#'>X</a></li></ul></div></div><img src='https://raw.githubusercontent.com/Tolaj/windcraft/main/docs/media/logo-light.png' alt='Windcraft' class='mt-16 w-full max-w-3xl opacity-90'><p class='py-8 text-xs text-neutral-500'>© 2026 Windcraft</p></div></footer>
Footers 07 · Legal only
The smallest footer: a copyright line and a few legal links, no logo.
<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
<footer class='border-t border-neutral-200 bg-white'><div class='mx-auto flex max-w-6xl flex-wrap items-center justify-between gap-3 px-6 py-6 text-xs text-neutral-500'><p>© 2026 Windcraft. All rights reserved.</p><nav class='flex gap-5'><a href='#' class='hover:text-black'>Privacy</a><a href='#' class='hover:text-black'>Terms</a><a href='#' class='hover:text-black'>Cookies</a></nav></div></footer>
Footers 06 · Call to action above
A black call-to-action band that leads into a light footer with logo and links.
<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
<div><section class='bg-black'><div class='mx-auto flex max-w-6xl flex-wrap items-center justify-between gap-6 px-6 py-16'><h2 class='max-w-xl text-3xl font-semibold tracking-tight text-white'>Ready to design in Tailwind?</h2><a href='#' class='rounded-lg bg-white px-6 py-3 text-sm font-semibold text-black'>Open the editor</a></div></section><footer class='bg-white'><div class='mx-auto flex max-w-6xl flex-wrap items-center justify-between gap-4 px-6 py-8'><img src='https://raw.githubusercontent.com/Tolaj/windcraft/main/docs/media/logo.png' alt='Windcraft' class='h-5 w-auto'><nav class='flex gap-6 text-sm text-neutral-600'><a href='#'>Docs</a><a href='#'>GitHub</a><a href='#'>Privacy</a></nav><p class='text-sm text-neutral-500'>© 2026 Windcraft</p></div></footer></div>
Footers 05 · With newsletter
A footer that starts with a subscribe form beside link columns.
<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
<footer class='border-t border-neutral-200 bg-neutral-50'><div class='mx-auto grid max-w-6xl gap-12 px-6 py-16 md:grid-cols-2'><div><img src='https://raw.githubusercontent.com/Tolaj/windcraft/main/docs/media/logo.png' alt='Windcraft' class='h-6 w-auto'><h3 class='mt-6 text-xl font-semibold text-black'>Get the changelog by email</h3><p class='mt-2 text-sm text-neutral-600'>New features, no noise. Unsubscribe any time.</p><form class='mt-5 flex max-w-sm gap-2'><input type='email' placeholder='you@company.com' class='min-w-0 flex-1 rounded-lg border border-neutral-300 bg-white px-4 py-2.5 text-sm outline-none focus:border-black'><button type='button' class='rounded-lg bg-black px-4 py-2.5 text-sm font-medium text-white'>Subscribe</button></form></div><div class='grid grid-cols-2 gap-8 text-sm'><div><h4 class='font-semibold text-black'>Product</h4><ul class='mt-4 space-y-3 text-neutral-600'><li><a href='#'>Editor</a></li><li><a href='#'>Pricing</a></li><li><a href='#'>Library</a></li></ul></div><div><h4 class='font-semibold text-black'>Company</h4><ul class='mt-4 space-y-3 text-neutral-600'><li><a href='#'>About</a></li><li><a href='#'>Contact</a></li><li><a href='#'>Privacy</a></li></ul></div></div></div></footer>
Footers 04 · Centered
Everything centered: logo, a link row, social links and the copyright.
<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
<footer class='border-t border-neutral-200 bg-white'><div class='mx-auto flex max-w-3xl flex-col items-center px-6 py-14 text-center'><img src='https://raw.githubusercontent.com/Tolaj/windcraft/main/docs/media/logo.png' alt='Windcraft' class='h-7 w-auto'><nav class='mt-8 flex flex-wrap justify-center gap-x-8 gap-y-3 text-sm text-neutral-600'><a href='#' class='hover:text-black'>Product</a><a href='#' class='hover:text-black'>Docs</a><a href='#' class='hover:text-black'>Pricing</a><a href='#' class='hover:text-black'>Contact</a></nav><div class='mt-6 flex gap-5 text-sm font-medium text-black'><a href='#'>GitHub</a><a href='#'>X</a><a href='#'>Reddit</a></div><p class='mt-8 text-sm text-neutral-500'>© 2026 Windcraft. Made for people who like clean code.</p></div></footer>
Footers 03 · Dark four columns
A black footer with the white logo, link columns in grey and a thin divider.
<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
<footer class='bg-black'><div class='mx-auto max-w-6xl px-6 py-16'><div class='grid gap-10 md:grid-cols-[1.5fr_1fr_1fr_1fr]'><div><img src='https://raw.githubusercontent.com/Tolaj/windcraft/main/docs/media/logo-light.png' alt='Windcraft' class='h-6 w-auto'><p class='mt-4 max-w-xs text-sm text-neutral-400'>A visual editor where every edit writes real Tailwind HTML.</p></div><div><h3 class='text-sm font-semibold text-white'>Product</h3><ul class='mt-4 space-y-3 text-sm text-neutral-400'><li><a href='#' class='hover:text-white'>Editor</a></li><li><a href='#' class='hover:text-white'>Library</a></li><li><a href='#' class='hover:text-white'>Pricing</a></li></ul></div><div><h3 class='text-sm font-semibold text-white'>Resources</h3><ul class='mt-4 space-y-3 text-sm text-neutral-400'><li><a href='#' class='hover:text-white'>Docs</a></li><li><a href='#' class='hover:text-white'>GitHub</a></li><li><a href='#' class='hover:text-white'>Changelog</a></li></ul></div><div><h3 class='text-sm font-semibold text-white'>Legal</h3><ul class='mt-4 space-y-3 text-sm text-neutral-400'><li><a href='#' class='hover:text-white'>Privacy</a></li><li><a href='#' class='hover:text-white'>Terms</a></li></ul></div></div><p class='mt-14 border-t border-neutral-800 pt-6 text-sm text-neutral-500'>© 2026 Windcraft</p></div></footer>
Footers 02 · One line
A slim footer: logo, a row of links and the copyright on a single line.
<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
<footer class='border-t border-neutral-200 bg-white'><div class='mx-auto flex max-w-6xl flex-wrap items-center justify-between gap-4 px-6 py-8'><img src='https://raw.githubusercontent.com/Tolaj/windcraft/main/docs/media/logo.png' alt='Windcraft' class='h-5 w-auto'><nav class='flex gap-6 text-sm text-neutral-600'><a href='#' class='hover:text-black'>Docs</a><a href='#' class='hover:text-black'>GitHub</a><a href='#' class='hover:text-black'>Privacy</a><a href='#' class='hover:text-black'>Terms</a></nav><p class='text-sm text-neutral-500'>© 2026 Windcraft</p></div></footer>
Footers 01 · Four columns
Classic footer: logo and tagline on the left, three link columns, and a copyright line.
<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
<footer class='border-t border-neutral-200 bg-white'><div class='mx-auto max-w-6xl px-6 py-16'><div class='grid gap-10 md:grid-cols-[1.5fr_1fr_1fr_1fr]'><div><img src='https://raw.githubusercontent.com/Tolaj/windcraft/main/docs/media/logo.png' alt='Windcraft' class='h-6 w-auto'><p class='mt-4 max-w-xs text-sm text-neutral-600'>Design in Tailwind. Keep it as code.</p></div><div><h3 class='text-sm font-semibold text-black'>Product</h3><ul class='mt-4 space-y-3 text-sm text-neutral-600'><li><a href='#' class='hover:text-black'>Editor</a></li><li><a href='#' class='hover:text-black'>Library</a></li><li><a href='#' class='hover:text-black'>Pricing</a></li></ul></div><div><h3 class='text-sm font-semibold text-black'>Resources</h3><ul class='mt-4 space-y-3 text-sm text-neutral-600'><li><a href='#' class='hover:text-black'>Docs</a></li><li><a href='#' class='hover:text-black'>GitHub</a></li><li><a href='#' class='hover:text-black'>Changelog</a></li></ul></div><div><h3 class='text-sm font-semibold text-black'>Company</h3><ul class='mt-4 space-y-3 text-sm text-neutral-600'><li><a href='#' class='hover:text-black'>About</a></li><li><a href='#' class='hover:text-black'>Contact</a></li><li><a href='#' class='hover:text-black'>Privacy</a></li></ul></div></div><p class='mt-14 border-t border-neutral-200 pt-6 text-sm text-neutral-500'>© 2026 Windcraft. All rights reserved.</p></div></footer>