Ever scrolled to the bottom of a website and thought, “Wow, this footer looks amazing!”? Okay, maybe not everyone geeks out over footers, but trust me—they’re more important than you might think. If you’ve been looking to give your website’s footer a facelift without spending hours on design and coding, you’re in the right place.
I’ve handpicked Top 10 Tailwind CSS responsive footer templates that you can drop into your project today. Yep, you read that right—today! These templates are not just responsive but also stylish and easy to customize. So let’s dive right in!
Template 1: Minimalist Footer with Company Mission
Code Snippet
<footer class="bg-white">
<div class="mx-auto max-w-7xl px-6 pb-8 pt-16 sm:pt-24 lg:px-8 lg:pt-32">
<div class="xl:grid xl:grid-cols-3 xl:gap-8">
<div class="space-y-8">
<img class="h-9" src="https://tailwindui.com/plus/img/logos/mark.svg?color=indigo&shade=600" alt="Company name">
<p class="text-balance text-sm/6 text-gray-600">Making the world a better place through constructing elegant hierarchies.</p>
<div class="flex gap-x-6">
<a href="#" class="text-gray-600 hover:text-gray-800">
<span class="sr-only">Facebook</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-gray-600 hover:text-gray-800">
<span class="sr-only">Instagram</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-gray-600 hover:text-gray-800">
<span class="sr-only">X</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M13.6823 10.6218L20.2391 3H18.6854L12.9921 9.61788L8.44486 3H3.2002L10.0765 13.0074L3.2002 21H4.75404L10.7663 14.0113L15.5685 21H20.8131L13.6819 10.6218H13.6823ZM11.5541 13.0956L10.8574 12.0991L5.31391 4.16971H7.70053L12.1742 10.5689L12.8709 11.5655L18.6861 19.8835H16.2995L11.5541 13.096V13.0956Z" />
</svg>
</a>
<a href="#" class="text-gray-600 hover:text-gray-800">
<span class="sr-only">GitHub</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-gray-600 hover:text-gray-800">
<span class="sr-only">YouTube</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M19.812 5.418c.861.23 1.538.907 1.768 1.768C21.998 8.746 22 12 22 12s0 3.255-.418 4.814a2.504 2.504 0 0 1-1.768 1.768c-1.56.419-7.814.419-7.814.419s-6.255 0-7.814-.419a2.505 2.505 0 0 1-1.768-1.768C2 15.255 2 12 2 12s0-3.255.417-4.814a2.507 2.507 0 0 1 1.768-1.768C5.744 5 11.998 5 11.998 5s6.255 0 7.814.418ZM15.194 12 10 15V9l5.194 3Z" clip-rule="evenodd" />
</svg>
</a>
</div>
</div>
<div class="mt-16 grid grid-cols-2 gap-8 xl:col-span-2 xl:mt-0">
<div class="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 class="text-sm/6 font-semibold text-gray-900">Solutions</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Marketing</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Analytics</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Automation</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Commerce</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Insights</a>
</li>
</ul>
</div>
<div class="mt-10 md:mt-0">
<h3 class="text-sm/6 font-semibold text-gray-900">Support</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Submit ticket</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Documentation</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Guides</a>
</li>
</ul>
</div>
</div>
<div class="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 class="text-sm/6 font-semibold text-gray-900">Company</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">About</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Blog</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Jobs</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Press</a>
</li>
</ul>
</div>
<div class="mt-10 md:mt-0">
<h3 class="text-sm/6 font-semibold text-gray-900">Legal</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Terms of service</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Privacy policy</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">License</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="mt-16 border-t border-gray-900/10 pt-8 sm:mt-20 lg:mt-24">
<p class="text-sm/6 text-gray-600">© 2024 Your Company, Inc. All rights reserved.</p>
</div>
</div>
</footer>This template is perfect for those who prefer a clean and straightforward design. It includes essential links and social media icons, all neatly organized.
Template 2: Minimalist Footer with Company Mission Dark
Code Snippet
<footer class="bg-gray-900">
<div class="mx-auto max-w-7xl px-6 pb-8 pt-16 sm:pt-24 lg:px-8 lg:pt-32">
<div class="xl:grid xl:grid-cols-3 xl:gap-8">
<div class="space-y-8">
<img class="h-9" src="https://tailwindui.com/plus/img/logos/mark.svg?color=indigo&shade=500" alt="Company name">
<p class="text-balance text-sm/6 text-gray-300">Making the world a better place through constructing elegant hierarchies.</p>
<div class="flex gap-x-6">
<a href="#" class="text-gray-400 hover:text-gray-300">
<span class="sr-only">Facebook</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-gray-300">
<span class="sr-only">Instagram</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-gray-300">
<span class="sr-only">X</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M13.6823 10.6218L20.2391 3H18.6854L12.9921 9.61788L8.44486 3H3.2002L10.0765 13.0074L3.2002 21H4.75404L10.7663 14.0113L15.5685 21H20.8131L13.6819 10.6218H13.6823ZM11.5541 13.0956L10.8574 12.0991L5.31391 4.16971H7.70053L12.1742 10.5689L12.8709 11.5655L18.6861 19.8835H16.2995L11.5541 13.096V13.0956Z" />
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-gray-300">
<span class="sr-only">GitHub</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-gray-300">
<span class="sr-only">YouTube</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M19.812 5.418c.861.23 1.538.907 1.768 1.768C21.998 8.746 22 12 22 12s0 3.255-.418 4.814a2.504 2.504 0 0 1-1.768 1.768c-1.56.419-7.814.419-7.814.419s-6.255 0-7.814-.419a2.505 2.505 0 0 1-1.768-1.768C2 15.255 2 12 2 12s0-3.255.417-4.814a2.507 2.507 0 0 1 1.768-1.768C5.744 5 11.998 5 11.998 5s6.255 0 7.814.418ZM15.194 12 10 15V9l5.194 3Z" clip-rule="evenodd" />
</svg>
</a>
</div>
</div>
<div class="mt-16 grid grid-cols-2 gap-8 xl:col-span-2 xl:mt-0">
<div class="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 class="text-sm/6 font-semibold text-white">Solutions</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Marketing</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Analytics</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Automation</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Commerce</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Insights</a>
</li>
</ul>
</div>
<div class="mt-10 md:mt-0">
<h3 class="text-sm/6 font-semibold text-white">Support</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Submit ticket</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Documentation</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Guides</a>
</li>
</ul>
</div>
</div>
<div class="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 class="text-sm/6 font-semibold text-white">Company</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">About</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Blog</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Jobs</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Press</a>
</li>
</ul>
</div>
<div class="mt-10 md:mt-0">
<h3 class="text-sm/6 font-semibold text-white">Legal</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Terms of service</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Privacy policy</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">License</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="mt-16 border-t border-white/10 pt-8 sm:mt-20 lg:mt-24">
<p class="text-sm/6 text-gray-400">© 2024 Your Company, Inc. All rights reserved.</p>
</div>
</div>
</footer>
Engage your visitors by adding a company mission in your footer. It includes essential links and social media icons.
Template 3: Multi-Column Footer with call-to-action
Code Snippet
<footer class="bg-white">
<div class="mx-auto max-w-7xl px-6 py-16 sm:py-24 lg:px-8 lg:py-32">
<div class="mx-auto max-w-2xl text-center">
<hgroup>
<h2 class="text-base/7 font-semibold text-indigo-600">Get started</h2>
<p class="mt-2 text-balance text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Boost your productivity. Start using our app today.</p>
</hgroup>
<p class="mx-auto mt-6 max-w-xl text-pretty text-lg/8 text-gray-600">Incididunt sint fugiat pariatur cupidatat consectetur sit cillum anim id veniam aliqua proident excepteur commodo do ea.</p>
<div class="mt-8 flex justify-center">
<a href="#" class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Get started</a>
</div>
</div>
<div class="mt-24 border-t border-gray-900/10 pt-12 xl:grid xl:grid-cols-3 xl:gap-8">
<img class="h-9" src="https://tailwindui.com/plus/img/logos/mark.svg?color=indigo&shade=600" alt="Company name">
<div class="mt-16 grid grid-cols-2 gap-8 xl:col-span-2 xl:mt-0">
<div class="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 class="text-sm/6 font-semibold text-gray-950">Solutions</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Marketing</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Analytics</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Automation</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Commerce</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Insights</a>
</li>
</ul>
</div>
<div class="mt-10 md:mt-0">
<h3 class="text-sm/6 font-semibold text-gray-950">Support</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Submit ticket</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Documentation</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Guides</a>
</li>
</ul>
</div>
</div>
<div class="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 class="text-sm/6 font-semibold text-gray-950">Company</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">About</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Blog</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Jobs</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Press</a>
</li>
</ul>
</div>
<div class="mt-10 md:mt-0">
<h3 class="text-sm/6 font-semibold text-gray-950">Legal</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Terms of service</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Privacy policy</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">License</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="mt-12 border-t border-gray-900/10 pt-8 md:flex md:items-center md:justify-between">
<div class="flex gap-x-6 md:order-2">
<a href="#" class="text-gray-600 hover:text-gray-800">
<span class="sr-only">Facebook</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-gray-600 hover:text-gray-800">
<span class="sr-only">Instagram</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-gray-600 hover:text-gray-800">
<span class="sr-only">X</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M13.6823 10.6218L20.2391 3H18.6854L12.9921 9.61788L8.44486 3H3.2002L10.0765 13.0074L3.2002 21H4.75404L10.7663 14.0113L15.5685 21H20.8131L13.6819 10.6218H13.6823ZM11.5541 13.0956L10.8574 12.0991L5.31391 4.16971H7.70053L12.1742 10.5689L12.8709 11.5655L18.6861 19.8835H16.2995L11.5541 13.096V13.0956Z" />
</svg>
</a>
<a href="#" class="text-gray-600 hover:text-gray-800">
<span class="sr-only">GitHub</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-gray-600 hover:text-gray-800">
<span class="sr-only">YouTube</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M19.812 5.418c.861.23 1.538.907 1.768 1.768C21.998 8.746 22 12 22 12s0 3.255-.418 4.814a2.504 2.504 0 0 1-1.768 1.768c-1.56.419-7.814.419-7.814.419s-6.255 0-7.814-.419a2.505 2.505 0 0 1-1.768-1.768C2 15.255 2 12 2 12s0-3.255.417-4.814a2.507 2.507 0 0 1 1.768-1.768C5.744 5 11.998 5 11.998 5s6.255 0 7.814.418ZM15.194 12 10 15V9l5.194 3Z" clip-rule="evenodd" />
</svg>
</a>
</div>
<p class="mt-8 text-sm/6 text-gray-600 md:order-1 md:mt-0">© 2024 Your Company, Inc. All rights reserved.</p>
</div>
</div>
</footer>Ideal for content-heavy websites, this footer organizes links and information into multiple columns, Call to action button making it easy for users to find what they’re looking for.
Template 4: Simple Footer
Code Snippet
<footer class="bg-white">
<div class="mx-auto max-w-7xl px-6 py-16 sm:py-24 lg:px-8 lg:py-32">
<div class="xl:grid xl:grid-cols-3 xl:gap-8">
<img class="h-9" src="https://tailwindui.com/plus/img/logos/mark.svg?color=indigo&shade=600" alt="Company name">
<div class="mt-16 grid grid-cols-2 gap-8 xl:col-span-2 xl:mt-0">
<div class="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 class="text-sm/6 font-semibold text-gray-900">Solutions</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Marketing</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Analytics</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Automation</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Commerce</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Insights</a>
</li>
</ul>
</div>
<div class="mt-10 md:mt-0">
<h3 class="text-sm/6 font-semibold text-gray-900">Support</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Submit ticket</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Documentation</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Guides</a>
</li>
</ul>
</div>
</div>
<div class="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 class="text-sm/6 font-semibold text-gray-900">Company</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">About</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Blog</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Jobs</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Press</a>
</li>
</ul>
</div>
<div class="mt-10 md:mt-0">
<h3 class="text-sm/6 font-semibold text-gray-900">Legal</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Terms of service</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Privacy policy</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">License</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</footer>Designed for simple use cases.
Template 5: Simple Dark Footer
Code Snippet
<footer class="bg-gray-900">
<div class="mx-auto max-w-7xl px-6 py-16 sm:py-24 lg:px-8 lg:py-32">
<div class="xl:grid xl:grid-cols-3 xl:gap-8">
<img class="h-9" src="https://tailwindui.com/plus/img/logos/mark.svg?color=indigo&shade=500" alt="Company name">
<div class="mt-16 grid grid-cols-2 gap-8 xl:col-span-2 xl:mt-0">
<div class="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 class="text-sm/6 font-semibold text-white">Solutions</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Marketing</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Analytics</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Automation</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Commerce</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Insights</a>
</li>
</ul>
</div>
<div class="mt-10 md:mt-0">
<h3 class="text-sm/6 font-semibold text-white">Support</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Submit ticket</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Documentation</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Guides</a>
</li>
</ul>
</div>
</div>
<div class="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 class="text-sm/6 font-semibold text-white">Company</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">About</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Blog</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Jobs</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Press</a>
</li>
</ul>
</div>
<div class="mt-10 md:mt-0">
<h3 class="text-sm/6 font-semibold text-white">Legal</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Terms of service</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Privacy policy</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">License</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</footer>Designed for simple use cases with dark-themed suited for modern, tech-focused websites.
Template 6: Newsletter Signup Footer
Code Snippet
<footer class="bg-white">
<div class="mx-auto max-w-7xl px-6 pb-8 pt-20 sm:pt-24 lg:px-8 lg:pt-32">
<div class="xl:grid xl:grid-cols-3 xl:gap-8">
<div class="grid grid-cols-2 gap-8 xl:col-span-2">
<div class="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 class="text-sm/6 font-semibold text-gray-900">Solutions</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Marketing</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Analytics</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Automation</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Commerce</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Insights</a>
</li>
</ul>
</div>
<div class="mt-10 md:mt-0">
<h3 class="text-sm/6 font-semibold text-gray-900">Support</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Submit ticket</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Documentation</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Guides</a>
</li>
</ul>
</div>
</div>
<div class="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 class="text-sm/6 font-semibold text-gray-900">Company</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">About</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Blog</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Jobs</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Press</a>
</li>
</ul>
</div>
<div class="mt-10 md:mt-0">
<h3 class="text-sm/6 font-semibold text-gray-900">Legal</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Terms of service</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Privacy policy</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">License</a>
</li>
</ul>
</div>
</div>
</div>
<div class="mt-10 xl:mt-0">
<h3 class="text-sm/6 font-semibold text-gray-900">Subscribe to our newsletter</h3>
<p class="mt-2 text-sm/6 text-gray-600">The latest news, articles, and resources, sent to your inbox weekly.</p>
<form class="mt-6 sm:flex sm:max-w-md">
<label for="email-address" class="sr-only">Email address</label>
<input type="email" name="email-address" id="email-address" autocomplete="email" required class="w-full min-w-0 rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:w-64 sm:text-sm/6 xl:w-full" placeholder="Enter your email">
<div class="mt-4 sm:ml-4 sm:mt-0 sm:shrink-0">
<button type="submit" class="flex w-full items-center justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Subscribe</button>
</div>
</form>
</div>
</div>
<div class="mt-16 border-t border-gray-900/10 pt-8 sm:mt-20 md:flex md:items-center md:justify-between lg:mt-24">
<div class="flex gap-x-6 md:order-2">
<a href="#" class="text-gray-600 hover:text-gray-800">
<span class="sr-only">Facebook</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-gray-600 hover:text-gray-800">
<span class="sr-only">Instagram</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-gray-600 hover:text-gray-800">
<span class="sr-only">X</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M13.6823 10.6218L20.2391 3H18.6854L12.9921 9.61788L8.44486 3H3.2002L10.0765 13.0074L3.2002 21H4.75404L10.7663 14.0113L15.5685 21H20.8131L13.6819 10.6218H13.6823ZM11.5541 13.0956L10.8574 12.0991L5.31391 4.16971H7.70053L12.1742 10.5689L12.8709 11.5655L18.6861 19.8835H16.2995L11.5541 13.096V13.0956Z" />
</svg>
</a>
<a href="#" class="text-gray-600 hover:text-gray-800">
<span class="sr-only">GitHub</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-gray-600 hover:text-gray-800">
<span class="sr-only">YouTube</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M19.812 5.418c.861.23 1.538.907 1.768 1.768C21.998 8.746 22 12 22 12s0 3.255-.418 4.814a2.504 2.504 0 0 1-1.768 1.768c-1.56.419-7.814.419-7.814.419s-6.255 0-7.814-.419a2.505 2.505 0 0 1-1.768-1.768C2 15.255 2 12 2 12s0-3.255.417-4.814a2.507 2.507 0 0 1 1.768-1.768C5.744 5 11.998 5 11.998 5s6.255 0 7.814.418ZM15.194 12 10 15V9l5.194 3Z" clip-rule="evenodd" />
</svg>
</a>
</div>
<p class="mt-8 text-sm/6 text-gray-600 md:order-1 md:mt-0">© 2024 Your Company, Inc. All rights reserved.</p>
</div>
</div>
</footer>Engage your visitors by adding a newsletter signup form in your footer. It’s an excellent way to grow your email list without being intrusive.
Template 7: Newsletter Signup Footer Dark
Code Snippet
<footer class="bg-gray-900">
<div class="mx-auto max-w-7xl px-6 pb-8 pt-20 sm:pt-24 lg:px-8 lg:pt-32">
<div class="xl:grid xl:grid-cols-3 xl:gap-8">
<div class="grid grid-cols-2 gap-8 xl:col-span-2">
<div class="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 class="text-sm/6 font-semibold text-white">Solutions</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Marketing</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Analytics</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Automation</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Commerce</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Insights</a>
</li>
</ul>
</div>
<div class="mt-10 md:mt-0">
<h3 class="text-sm/6 font-semibold text-white">Support</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Submit ticket</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Documentation</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Guides</a>
</li>
</ul>
</div>
</div>
<div class="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 class="text-sm/6 font-semibold text-white">Company</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">About</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Blog</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Jobs</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Press</a>
</li>
</ul>
</div>
<div class="mt-10 md:mt-0">
<h3 class="text-sm/6 font-semibold text-white">Legal</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Terms of service</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Privacy policy</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">License</a>
</li>
</ul>
</div>
</div>
</div>
<div class="mt-10 xl:mt-0">
<h3 class="text-sm/6 font-semibold text-white">Subscribe to our newsletter</h3>
<p class="mt-2 text-sm/6 text-gray-300">The latest news, articles, and resources, sent to your inbox weekly.</p>
<form class="mt-6 sm:flex sm:max-w-md">
<label for="email-address" class="sr-only">Email address</label>
<input type="email" name="email-address" id="email-address" autocomplete="email" required class="w-full min-w-0 rounded-md bg-white/5 px-3 py-1.5 text-base text-white outline outline-1 -outline-offset-1 outline-white/10 placeholder:text-gray-500 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-500 sm:w-64 sm:text-sm/6 xl:w-full" placeholder="Enter your email">
<div class="mt-4 sm:ml-4 sm:mt-0 sm:shrink-0">
<button type="submit" class="flex w-full items-center justify-center rounded-md bg-indigo-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500">Subscribe</button>
</div>
</form>
</div>
</div>
<div class="mt-16 border-t border-white/10 pt-8 sm:mt-20 md:flex md:items-center md:justify-between lg:mt-24">
<div class="flex gap-x-6 md:order-2">
<a href="#" class="text-gray-400 hover:text-gray-300">
<span class="sr-only">Facebook</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-gray-300">
<span class="sr-only">Instagram</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-gray-300">
<span class="sr-only">X</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M13.6823 10.6218L20.2391 3H18.6854L12.9921 9.61788L8.44486 3H3.2002L10.0765 13.0074L3.2002 21H4.75404L10.7663 14.0113L15.5685 21H20.8131L13.6819 10.6218H13.6823ZM11.5541 13.0956L10.8574 12.0991L5.31391 4.16971H7.70053L12.1742 10.5689L12.8709 11.5655L18.6861 19.8835H16.2995L11.5541 13.096V13.0956Z" />
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-gray-300">
<span class="sr-only">GitHub</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-gray-300">
<span class="sr-only">YouTube</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M19.812 5.418c.861.23 1.538.907 1.768 1.768C21.998 8.746 22 12 22 12s0 3.255-.418 4.814a2.504 2.504 0 0 1-1.768 1.768c-1.56.419-7.814.419-7.814.419s-6.255 0-7.814-.419a2.505 2.505 0 0 1-1.768-1.768C2 15.255 2 12 2 12s0-3.255.417-4.814a2.507 2.507 0 0 1 1.768-1.768C5.744 5 11.998 5 11.998 5s6.255 0 7.814.418ZM15.194 12 10 15V9l5.194 3Z" clip-rule="evenodd" />
</svg>
</a>
</div>
<p class="mt-8 text-sm/6 text-gray-400 md:order-1 md:mt-0">© 2024 Your Company, Inc. All rights reserved.</p>
</div>
</div>
</footer>A sleek, dark-themed footer that’s easy on the eyes to engage your visitors by adding a newsletter signup form in your footer.
Template 8: Simple Centered Footer
Code Snippet
<footer class="bg-white">
<div class="mx-auto max-w-7xl overflow-hidden px-6 py-20 sm:py-24 lg:px-8">
<nav class="-mb-6 flex flex-wrap justify-center gap-x-12 gap-y-3 text-sm/6" aria-label="Footer">
<a href="#" class="text-gray-600 hover:text-gray-900">About</a>
<a href="#" class="text-gray-600 hover:text-gray-900">Blog</a>
<a href="#" class="text-gray-600 hover:text-gray-900">Jobs</a>
<a href="#" class="text-gray-600 hover:text-gray-900">Press</a>
<a href="#" class="text-gray-600 hover:text-gray-900">Accessibility</a>
<a href="#" class="text-gray-600 hover:text-gray-900">Partners</a>
</nav>
<div class="mt-16 flex justify-center gap-x-10">
<a href="#" class="text-gray-600 hover:text-gray-800">
<span class="sr-only">Facebook</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-gray-600 hover:text-gray-800">
<span class="sr-only">Instagram</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-gray-600 hover:text-gray-800">
<span class="sr-only">X</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M13.6823 10.6218L20.2391 3H18.6854L12.9921 9.61788L8.44486 3H3.2002L10.0765 13.0074L3.2002 21H4.75404L10.7663 14.0113L15.5685 21H20.8131L13.6819 10.6218H13.6823ZM11.5541 13.0956L10.8574 12.0991L5.31391 4.16971H7.70053L12.1742 10.5689L12.8709 11.5655L18.6861 19.8835H16.2995L11.5541 13.096V13.0956Z" />
</svg>
</a>
<a href="#" class="text-gray-600 hover:text-gray-800">
<span class="sr-only">GitHub</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-gray-600 hover:text-gray-800">
<span class="sr-only">YouTube</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M19.812 5.418c.861.23 1.538.907 1.768 1.768C21.998 8.746 22 12 22 12s0 3.255-.418 4.814a2.504 2.504 0 0 1-1.768 1.768c-1.56.419-7.814.419-7.814.419s-6.255 0-7.814-.419a2.505 2.505 0 0 1-1.768-1.768C2 15.255 2 12 2 12s0-3.255.417-4.814a2.507 2.507 0 0 1 1.768-1.768C5.744 5 11.998 5 11.998 5s6.255 0 7.814.418ZM15.194 12 10 15V9l5.194 3Z" clip-rule="evenodd" />
</svg>
</a>
</div>
<p class="mt-10 text-center text-sm/6 text-gray-600">© 2024 Your Company, Inc. All rights reserved.</p>
</div>
</footer>Designed with accessibility in mind, this footer ensures that all users, including those using assistive technologies, have a seamless experience.
Template 9: Simple Centered Footer
Code Snippet
<footer class="bg-white">
<div class="mx-auto max-w-7xl px-6 py-12 md:flex md:items-center md:justify-between lg:px-8">
<div class="flex justify-center gap-x-6 md:order-2">
<a href="#" class="text-gray-600 hover:text-gray-800">
<span class="sr-only">Facebook</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-gray-600 hover:text-gray-800">
<span class="sr-only">Instagram</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-gray-600 hover:text-gray-800">
<span class="sr-only">X</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M13.6823 10.6218L20.2391 3H18.6854L12.9921 9.61788L8.44486 3H3.2002L10.0765 13.0074L3.2002 21H4.75404L10.7663 14.0113L15.5685 21H20.8131L13.6819 10.6218H13.6823ZM11.5541 13.0956L10.8574 12.0991L5.31391 4.16971H7.70053L12.1742 10.5689L12.8709 11.5655L18.6861 19.8835H16.2995L11.5541 13.096V13.0956Z" />
</svg>
</a>
<a href="#" class="text-gray-600 hover:text-gray-800">
<span class="sr-only">GitHub</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-gray-600 hover:text-gray-800">
<span class="sr-only">YouTube</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M19.812 5.418c.861.23 1.538.907 1.768 1.768C21.998 8.746 22 12 22 12s0 3.255-.418 4.814a2.504 2.504 0 0 1-1.768 1.768c-1.56.419-7.814.419-7.814.419s-6.255 0-7.814-.419a2.505 2.505 0 0 1-1.768-1.768C2 15.255 2 12 2 12s0-3.255.417-4.814a2.507 2.507 0 0 1 1.768-1.768C5.744 5 11.998 5 11.998 5s6.255 0 7.814.418ZM15.194 12 10 15V9l5.194 3Z" clip-rule="evenodd" />
</svg>
</a>
</div>
<p class="mt-8 text-center text-sm/6 text-gray-600 md:order-1 md:mt-0">© 2024 Your Company, Inc. All rights reserved.</p>
</div>
</footer>If your brand thrives on social media engagement, this footer puts your social icons front and center.
Template 10: Newsletter and Localization Footer
Code Snippet
<footer class="bg-gray-800">
<div class="mx-auto max-w-7xl px-6 py-12 lg:px-8 lg:py-16">
<div class="pb-8 xl:grid xl:grid-cols-5 xl:gap-8">
<div class="grid grid-cols-2 gap-8 xl:col-span-4">
<div class="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 class="text-base font-medium text-white">Solutions</h3>
<ul role="list" class="mt-4 space-y-4">
<li>
<a href="#" class="text-base text-gray-300 hover:text-white">Marketing</a>
</li>
<li>
<a href="#" class="text-base text-gray-300 hover:text-white">Analytics</a>
</li>
<li>
<a href="#" class="text-base text-gray-300 hover:text-white">Commerce</a>
</li>
<li>
<a href="#" class="text-base text-gray-300 hover:text-white">Insights</a>
</li>
</ul>
</div>
<div class="mt-12 md:mt-0">
<h3 class="text-base font-medium text-white">Support</h3>
<ul role="list" class="mt-4 space-y-4">
<li>
<a href="#" class="text-base text-gray-300 hover:text-white">Pricing</a>
</li>
<li>
<a href="#" class="text-base text-gray-300 hover:text-white">Documentation</a>
</li>
<li>
<a href="#" class="text-base text-gray-300 hover:text-white">Guides</a>
</li>
<li>
<a href="#" class="text-base text-gray-300 hover:text-white">API Status</a>
</li>
</ul>
</div>
</div>
<div class="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 class="text-base font-medium text-white">Company</h3>
<ul role="list" class="mt-4 space-y-4">
<li>
<a href="#" class="text-base text-gray-300 hover:text-white">About</a>
</li>
<li>
<a href="#" class="text-base text-gray-300 hover:text-white">Blog</a>
</li>
<li>
<a href="#" class="text-base text-gray-300 hover:text-white">Jobs</a>
</li>
<li>
<a href="#" class="text-base text-gray-300 hover:text-white">Press</a>
</li>
<li>
<a href="#" class="text-base text-gray-300 hover:text-white">Partners</a>
</li>
</ul>
</div>
<div class="mt-12 md:mt-0">
<h3 class="text-base font-medium text-white">Legal</h3>
<ul role="list" class="mt-4 space-y-4">
<li>
<a href="#" class="text-base text-gray-300 hover:text-white">Claim</a>
</li>
<li>
<a href="#" class="text-base text-gray-300 hover:text-white">Privacy</a>
</li>
<li>
<a href="#" class="text-base text-gray-300 hover:text-white">Terms</a>
</li>
</ul>
</div>
</div>
</div>
<div class="mt-12 xl:mt-0">
<h3 class="text-base font-medium text-white">Language & Currency</h3>
<form class="mt-4 sm:max-w-xs">
<fieldset class="w-full">
<label for="language" class="sr-only">Language</label>
<div class="relative">
<select id="language" name="language" class="block w-full appearance-none rounded-md border border-transparent bg-gray-700 bg-none py-2 pl-3 pr-10 text-base text-white focus:border-white focus:outline-none focus:ring-1 focus:ring-white sm:text-sm">
<option selected>English</option>
<option>French</option>
<option>German</option>
<option>Japanese</option>
<option>Spanish</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2">
<svg class="size-4 text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
</svg>
</div>
</div>
</fieldset>
<fieldset class="mt-4 w-full">
<label for="currency" class="sr-only">Currency</label>
<div class="relative mt-1.5">
<select id="currency" name="currency" class="block w-full appearance-none rounded-md border border-transparent bg-gray-700 bg-none py-2 pl-3 pr-10 text-base text-white focus:border-white focus:outline-none focus:ring-1 focus:ring-white sm:text-sm">
<option>ARS</option>
<option selected>AUD</option>
<option>CAD</option>
<option>CHF</option>
<option>EUR</option>
<option>GBP</option>
<option>JPY</option>
<option>USD</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2">
<svg class="size-4 text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
</svg>
</div>
</div>
</fieldset>
</form>
</div>
</div>
<div class="border-t border-gray-700 pt-8 lg:flex lg:items-center lg:justify-between xl:mt-0">
<div>
<h3 class="text-base font-medium text-white">Subscribe to our newsletter</h3>
<p class="mt-2 text-base text-gray-300">The latest news, articles, and resources, sent to your inbox weekly.</p>
</div>
<form class="mt-4 sm:flex sm:max-w-md lg:mt-0">
<label for="email-address" class="sr-only">Email address</label>
<input type="email" name="email-address" id="email-address" autocomplete="email" required class="w-full min-w-0 appearance-none rounded-md border border-transparent bg-white px-4 py-2 text-base text-gray-900 placeholder-gray-500 focus:border-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800 sm:max-w-xs" placeholder="Enter your email">
<div class="mt-3 rounded-md sm:ml-3 sm:mt-0 sm:shrink-0">
<button type="submit" class="flex w-full items-center justify-center rounded-md border border-transparent bg-indigo-500 px-4 py-2 text-base font-medium text-white hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-800">Subscribe</button>
</div>
</form>
</div>
<div class="mt-8 border-t border-gray-700 pt-8 md:flex md:items-center md:justify-between">
<div class="flex space-x-6 md:order-2">
<a href="#" class="text-gray-400 hover:text-gray-300">
<span class="sr-only">Facebook</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-gray-300">
<span class="sr-only">Instagram</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-gray-300">
<span class="sr-only">X</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M13.6823 10.6218L20.2391 3H18.6854L12.9921 9.61788L8.44486 3H3.2002L10.0765 13.0074L3.2002 21H4.75404L10.7663 14.0113L15.5685 21H20.8131L13.6819 10.6218H13.6823ZM11.5541 13.0956L10.8574 12.0991L5.31391 4.16971H7.70053L12.1742 10.5689L12.8709 11.5655L18.6861 19.8835H16.2995L11.5541 13.096V13.0956Z" />
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-gray-300">
<span class="sr-only">GitHub</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-gray-300">
<span class="sr-only">Dribbble</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z" clip-rule="evenodd" />
</svg>
</a>
</div>
<p class="mt-8 text-base text-gray-400 md:order-1 md:mt-0">© 2024 Your Company, Inc. All rights reserved.</p>
</div>
</div>
</footer>If your website caters to a global audience, this footer allows users to select their preferred language easily.
Why Responsive Footers Matter
So, you’ve got the templates—awesome! But you might be wondering, “Why should I care so much about the footer?” Well, let me share a quick story. A friend of mine once ignored their website’s footer, thinking no one ever scrolls that far. Turns out, their bounce rate was higher than Mount Everest because users couldn’t find essential info like contact details or social media links.
A responsive footer ensures that no matter what device your visitors are using, they have access to important information. It’s like the Swiss Army knife of your website—small but incredibly useful.
How Tailwind CSS Simplifies Footer Design
Tailwind CSS takes the hassle out of designing responsive footers. With its utility-first approach, you can build complex designs without writing a single line of custom CSS. This means you can focus on crafting the perfect footer without getting bogged down in styling details.
Benefits of using Tailwind CSS for footers:
- Consistency: Ensures a uniform look across different sections of your site.
- Flexibility: Easily customizable to match your brand’s aesthetic.
- Efficiency: Speeds up development time with pre-built utility classes.
Tips for Customizing Tailwind CSS Footer
Now that you’ve got these templates, here are some handy tips to make them truly yours:
- Match Your Branding: Update colors and fonts to align with your brand identity.
- Prioritize Content: Decide what’s most important for your visitors and make it prominent.
- Test on Multiple Devices: Ensure your footer looks great on both mobile and desktop.
- Keep It Clean: Less is more. Don’t overload your footer with too much information.
- Update Regularly: Keep links and information up-to-date to maintain credibility.
Conclusion
There you have it—10 responsive footer templates built with Tailwind CSS, ready for you to use. Updating your footer doesn’t have to be a daunting task. With these templates, you can enhance your website’s usability and aesthetic appeal in no time.
I hope you find these templates as useful as I have. Feel free to tweak them, mix and match components, and make them your own.
