Tailwind CSS Footer - Flowbite
Use the footer section at the bottom of every page to show valuable information to your users, such as sitemap links, a copyright notice, and a logo
The footer is one of the most underestimated sections of a website being located at the very bottom of every page, however, it can be used as a way to try to convince users to stay on your website if they haven’t found the information they’ve been looking for inside the main content area.
Use these footer sections coded with the utility classes from Tailwind CSS and components from Flowbite to offer valuable information to your users such as the brand’s logo, sitemap links, copyright notice, social media profiles, and more.
Default footer #
Use this footer component to show a copyright notice and some helpful website links.
Toggle RTL mode
Toggle dark mode
Loading...
Copy to clipboard
<footer class="bg-neutral-primary-soft rounded-base shadow-xs border border-default m-4">
<div class="w-full mx-auto max-w-screen-xl p-4 md:flex md:items-center md:justify-between">
<span class="text-sm text-body sm:text-center">© 2023 <a href="https://flowbite.com/" class="hover:underline">Flowbite™</a>. All Rights Reserved.
</span>
<ul class="flex flex-wrap items-center mt-3 text-sm font-medium text-body sm:mt-0">
<li>
<a href="#" class="hover:underline me-4 md:me-6">About</a>
</li>
<li>
<a href="#" class="hover:underline me-4 md:me-6">Privacy Policy</a>
</li>
<li>
<a href="#" class="hover:underline me-4 md:me-6">Licensing</a>
</li>
<li>
<a href="#" class="hover:underline">Contact</a>
</li>
</ul>
</div>
</footer>
Footer with logo #
Use this component to show your brand’s logo, a few website links and the copyright notice on a second row.
Toggle RTL mode
Toggle dark mode
Loading...
Copy to clipboard
<footer class="bg-neutral-primary-soft rounded-base shadow-xs border border-default m-4">
<div class="w-full max-w-screen-xl mx-auto p-4 md:py-8">
<div class="sm:flex sm:items-center sm:justify-between">
<a href="https://flowbite.com/" class="flex items-center mb-4 sm:mb-0 space-x-3 rtl:space-x-reverse">
<img src="https://flowbite.com/docs/images/logo.svg" class="h-7" alt="Flowbite Logo" />
<span class="text-heading self-center text-2xl font-semibold whitespace-nowrap">Flowbite</span>
</a>
<ul class="flex flex-wrap items-center mb-6 text-sm font-medium text-body sm:mb-0">
<li>
<a href="#" class="hover:underline me-4 md:me-6">About</a>
</li>
<li>
<a href="#" class="hover:underline me-4 md:me-6">Privacy Policy</a>
</li>
<li>
<a href="#" class="hover:underline me-4 md:me-6">Licensing</a>
</li>
<li>
<a href="#" class="hover:underline">Contact</a>
</li>
</ul>
</div>
<hr class="my-6 border-default sm:mx-auto lg:my-8" />
<span class="block text-sm text-body sm:text-center">© 2023 <a href="https://flowbite.com/" class="hover:underline">Flowbite™</a>. All Rights Reserved.</span>
</div>
</footer>
Social media icons #
This footer component can be used to show your brand’s logo, multiple rows of website links, a copyright notice and social media profile icons including Twitter, Facebook, Instagram, and more.
Toggle RTL mode
Toggle dark mode
Loading...
Copy to clipboard
<footer class="bg-neutral-primary-soft">
<div class="mx-auto w-full max-w-screen-xl p-4 py-6 lg:py-8">
<div class="md:flex md:justify-between">
<div class="mb-6 md:mb-0">
<a href="https://flowbite.com/" class="flex items-center">
<img src="https://flowbite.com/docs/images/logo.svg" class="h-7 me-3" alt="FlowBite Logo" />
<span class="text-heading self-center text-2xl font-semibold whitespace-nowrap">Flowbite</span>
</a>
</div>
<div class="grid grid-cols-2 gap-8 sm:gap-6 sm:grid-cols-3">
<div>
<h2 class="mb-6 text-sm font-semibold text-heading uppercase">Resources</h2>
<ul class="text-body font-medium">
<li class="mb-4">
<a href="https://flowbite.com/" class="hover:underline">Flowbite</a>
</li>
<li>
<a href="https://tailwindcss.com/" class="hover:underline">Tailwind CSS</a>
</li>
</ul>
</div>
<div>
<h2 class="mb-6 text-sm font-semibold text-heading uppercase">Follow us</h2>
<ul class="text-body font-medium">
<li class="mb-4">
<a href="https://github.com/themesberg/flowbite" class="hover:underline ">Github</a>
</li>
<li>
<a href="https://discord.gg/4eeurUVvTy" class="hover:underline">Discord</a>
</li>
</ul>
</div>
<div>
<h2 class="mb-6 text-sm font-semibold text-heading uppercase">Legal</h2>
<ul class="text-body font-medium">
<li class="mb-4">
<a href="#" class="hover:underline">Privacy Policy</a>
</li>
<li>
<a href="#" class="hover:underline">Terms & Conditions</a>
</li>
</ul>
</div>
</div>
</div>
<hr class="my-6 border-default sm:mx-auto lg:my-8" />
<div class="sm:flex sm:items-center sm:justify-between">
<span class="text-sm text-body sm:text-center">© 2023 <a href="https://flowbite.com/" class="hover:underline">Flowbite™</a>. All Rights Reserved.
</span>
<div class="flex mt-4 sm:justify-center sm:mt-0">
<a href="#" class="text-body hover:text-heading">
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M13.135 6H15V3h-1.865a4.147 4.147 0 0 0-4.142 4.142V9H7v3h2v9.938h3V12h2.021l.592-3H12V6.591A.6.6 0 0 1 12.592 6h.543Z" clip-rule="evenodd"/></svg>
<span class="sr-only">Facebook page</span>
</a>
<a href="#" class="text-body hover:text-heading ms-5">
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M18.942 5.556a16.3 16.3 0 0 0-4.126-1.3 12.04 12.04 0 0 0-.529 1.1 15.175 15.175 0 0 0-4.573 0 11.586 11.586 0 0 0-.535-1.1 16.274 16.274 0 0 0-4.129 1.3 17.392 17.392 0 0 0-2.868 11.662 15.785 15.785 0 0 0 4.963 2.521c.41-.564.773-1.16 1.084-1.785a10.638 10.638 0 0 1-1.706-.83c.143-.106.283-.217.418-.331a11.664 11.664 0 0 0 10.118 0c.137.114.277.225.418.331-.544.328-1.116.606-1.71.832a12.58 12.58 0 0 0 1.084 1.785 16.46 16.46 0 0 0 5.064-2.595 17.286 17.286 0 0 0-2.973-11.59ZM8.678 14.813a1.94 1.94 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.918 1.918 0 0 1 1.8 2.047 1.929 1.929 0 0 1-1.8 2.045Zm6.644 0a1.94 1.94 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.919 1.919 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Z"/></svg>
<span class="sr-only">Discord community</span>
</a>
<a href="#" class="text-body hover:text-heading ms-5">
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M13.795 10.533 20.68 2h-3.073l-5.255 6.517L7.69 2H1l7.806 10.91L1.47 22h3.074l5.705-7.07L15.31 22H22l-8.205-11.467Zm-2.38 2.95L9.97 11.464 4.36 3.627h2.31l4.528 6.317 1.443 2.02 6.018 8.409h-2.31l-4.934-6.89Z"/></svg>
<span class="sr-only">Twitter page</span>
</a>
<a href="#" class="text-body hover:text-heading ms-5">
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M12.006 2a9.847 9.847 0 0 0-6.484 2.44 10.32 10.32 0 0 0-3.393 6.17 10.48 10.48 0 0 0 1.317 6.955 10.045 10.045 0 0 0 5.4 4.418c.504.095.683-.223.683-.494 0-.245-.01-1.052-.014-1.908-2.78.62-3.366-1.21-3.366-1.21a2.711 2.711 0 0 0-1.11-1.5c-.907-.637.07-.621.07-.621.317.044.62.163.885.346.266.183.487.426.647.71.135.253.318.476.538.655a2.079 2.079 0 0 0 2.37.196c.045-.52.27-1.006.635-1.37-2.219-.259-4.554-1.138-4.554-5.07a4.022 4.022 0 0 1 1.031-2.75 3.77 3.77 0 0 1 .096-2.713s.839-.275 2.749 1.05a9.26 9.26 0 0 1 5.004 0c1.906-1.325 2.74-1.05 2.74-1.05.37.858.406 1.828.101 2.713a4.017 4.017 0 0 1 1.029 2.75c0 3.939-2.339 4.805-4.564 5.058a2.471 2.471 0 0 1 .679 1.897c0 1.372-.012 2.477-.012 2.814 0 .272.18.592.687.492a10.05 10.05 0 0 0 5.388-4.421 10.473 10.473 0 0 0 1.313-6.948 10.32 10.32 0 0 0-3.39-6.165A9.847 9.847 0 0 0 12.007 2Z" clip-rule="evenodd"/></svg>
<span class="sr-only">GitHub account</span>
</a>
<a href="#" class="text-body hover:text-heading ms-5">
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M12 2a10 10 0 1 0 10 10A10.009 10.009 0 0 0 12 2Zm6.613 4.614a8.523 8.523 0 0 1 1.93 5.32 20.093 20.093 0 0 0-5.949-.274c-.059-.149-.122-.292-.184-.441a23.879 23.879 0 0 0-.566-1.239 11.41 11.41 0 0 0 4.769-3.366ZM10 3.707a8.82 8.82 0 0 1 2-.238 8.5 8.5 0 0 1 5.664 2.152 9.608 9.608 0 0 1-4.476 3.087A45.755 45.755 0 0 0 10 3.707Zm-6.358 6.555a8.57 8.57 0 0 1 4.73-5.981 53.99 53.99 0 0 1 3.168 4.941 32.078 32.078 0 0 1-7.9 1.04h.002Zm2.01 7.46a8.51 8.51 0 0 1-2.2-5.707v-.262a31.641 31.641 0 0 0 8.777-1.219c.243.477.477.964.692 1.449-.114.032-.227.067-.336.1a13.569 13.569 0 0 0-6.942 5.636l.009.003ZM12 20.556a8.508 8.508 0 0 1-5.243-1.8 11.717 11.717 0 0 1 6.7-5.332.509.509 0 0 1 .055-.02 35.65 35.65 0 0 1 1.819 6.476 8.476 8.476 0 0 1-3.331.676Zm4.772-1.462A37.232 37.232 0 0 0 15.113 13a12.513 12.513 0 0 1 5.321.364 8.56 8.56 0 0 1-3.66 5.73h-.002Z" clip-rule="evenodd"/></svg>
<span class="sr-only">Dribbble account</span>
</a>
</div>
</div>
</div>
</footer>
Sitemap links #
If you have a website with many pages you can use this footer component to show a sitemap spanning the entire width of a row followed below by a copyright notice and social media icons.
Toggle RTL mode
Toggle dark mode
Loading...
Copy to clipboard
<footer class="bg-neutral-primary">
<div class="mx-auto w-full max-w-screen-xl">
<div class="grid grid-cols-2 gap-8 px-4 py-6 lg:py-8 md:grid-cols-4">
<div>
<h2 class="mb-6 text-sm font-semibold text-heading uppercase">Company</h2>
<ul class="text-body font-medium">
<li class="mb-4">
<a href="#" class=" hover:underline">About</a>
</li>
<li class="mb-4">
<a href="#" class="hover:underline">Careers</a>
</li>
<li class="mb-4">
<a href="#" class="hover:underline">Brand Center</a>
</li>
<li class="mb-4">
<a href="#" class="hover:underline">Blog</a>
</li>
</ul>
</div>
<div>
<h2 class="mb-6 text-sm font-semibold text-heading uppercase">Help center</h2>
<ul class="text-body font-medium">
<li class="mb-4">
<a href="#" class="hover:underline">Discord Server</a>
</li>
<li class="mb-4">
<a href="#" class="hover:underline">Twitter</a>
</li>
<li class="mb-4">
<a href="#" class="hover:underline">Facebook</a>
</li>
<li class="mb-4">
<a href="#" class="hover:underline">Contact Us</a>
</li>
</ul>
</div>
<div>
<h2 class="mb-6 text-sm font-semibold text-heading uppercase">Legal</h2>
<ul class="text-body font-medium">
<li class="mb-4">
<a href="#" class="hover:underline">Privacy Policy</a>
</li>
<li class="mb-4">
<a href="#" class="hover:underline">Licensing</a>
</li>
<li class="mb-4">
<a href="#" class="hover:underline">Terms & Conditions</a>
</li>
</ul>
</div>
<div>
<h2 class="mb-6 text-sm font-semibold text-heading uppercase">Download</h2>
<ul class="text-body font-medium">
<li class="mb-4">
<a href="#" class="hover:underline">iOS</a>
</li>
<li class="mb-4">
<a href="#" class="hover:underline">Android</a>
</li>
<li class="mb-4">
<a href="#" class="hover:underline">Windows</a>
</li>
<li class="mb-4">
<a href="#" class="hover:underline">MacOS</a>
</li>
</ul>
</div>
</div>
<div class="px-4 py-6 bg-neutral-secondary-soft md:flex md:items-center md:justify-between">
<span class="text-sm text-body sm:text-center">© 2023 <a href="https://flowbite.com/">Flowbite™</a>. All Rights Reserved.
</span>
<div class="flex mt-4 sm:justify-center md:mt-0 space-x-2 rtl:space-x-reverse">
<a href="#" class="text-body hover:text-heading">
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M13.135 6H15V3h-1.865a4.147 4.147 0 0 0-4.142 4.142V9H7v3h2v9.938h3V12h2.021l.592-3H12V6.591A.6.6 0 0 1 12.592 6h.543Z" clip-rule="evenodd"/></svg>
<span class="sr-only">Facebook page</span>
</a>
<a href="#" class="text-body hover:text-heading ms-5">
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M18.942 5.556a16.3 16.3 0 0 0-4.126-1.3 12.04 12.04 0 0 0-.529 1.1 15.175 15.175 0 0 0-4.573 0 11.586 11.586 0 0 0-.535-1.1 16.274 16.274 0 0 0-4.129 1.3 17.392 17.392 0 0 0-2.868 11.662 15.785 15.785 0 0 0 4.963 2.521c.41-.564.773-1.16 1.084-1.785a10.638 10.638 0 0 1-1.706-.83c.143-.106.283-.217.418-.331a11.664 11.664 0 0 0 10.118 0c.137.114.277.225.418.331-.544.328-1.116.606-1.71.832a12.58 12.58 0 0 0 1.084 1.785 16.46 16.46 0 0 0 5.064-2.595 17.286 17.286 0 0 0-2.973-11.59ZM8.678 14.813a1.94 1.94 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.918 1.918 0 0 1 1.8 2.047 1.929 1.929 0 0 1-1.8 2.045Zm6.644 0a1.94 1.94 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.919 1.919 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Z"/></svg>
<span class="sr-only">Discord community</span>
</a>
<a href="#" class="text-body hover:text-heading ms-5">
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M13.795 10.533 20.68 2h-3.073l-5.255 6.517L7.69 2H1l7.806 10.91L1.47 22h3.074l5.705-7.07L15.31 22H22l-8.205-11.467Zm-2.38 2.95L9.97 11.464 4.36 3.627h2.31l4.528 6.317 1.443 2.02 6.018 8.409h-2.31l-4.934-6.89Z"/></svg>
<span class="sr-only">Twitter page</span>
</a>
<a href="#" class="text-body hover:text-heading ms-5">
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M12.006 2a9.847 9.847 0 0 0-6.484 2.44 10.32 10.32 0 0 0-3.393 6.17 10.48 10.48 0 0 0 1.317 6.955 10.045 10.045 0 0 0 5.4 4.418c.504.095.683-.223.683-.494 0-.245-.01-1.052-.014-1.908-2.78.62-3.366-1.21-3.366-1.21a2.711 2.711 0 0 0-1.11-1.5c-.907-.637.07-.621.07-.621.317.044.62.163.885.346.266.183.487.426.647.71.135.253.318.476.538.655a2.079 2.079 0 0 0 2.37.196c.045-.52.27-1.006.635-1.37-2.219-.259-4.554-1.138-4.554-5.07a4.022 4.022 0 0 1 1.031-2.75 3.77 3.77 0 0 1 .096-2.713s.839-.275 2.749 1.05a9.26 9.26 0 0 1 5.004 0c1.906-1.325 2.74-1.05 2.74-1.05.37.858.406 1.828.101 2.713a4.017 4.017 0 0 1 1.029 2.75c0 3.939-2.339 4.805-4.564 5.058a2.471 2.471 0 0 1 .679 1.897c0 1.372-.012 2.477-.012 2.814 0 .272.18.592.687.492a10.05 10.05 0 0 0 5.388-4.421 10.473 10.473 0 0 0 1.313-6.948 10.32 10.32 0 0 0-3.39-6.165A9.847 9.847 0 0 0 12.007 2Z" clip-rule="evenodd"/></svg>
<span class="sr-only">GitHub account</span>
</a>
<a href="#" class="text-body hover:text-heading ms-5">
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M12 2a10 10 0 1 0 10 10A10.009 10.009 0 0 0 12 2Zm6.613 4.614a8.523 8.523 0 0 1 1.93 5.32 20.093 20.093 0 0 0-5.949-.274c-.059-.149-.122-.292-.184-.441a23.879 23.879 0 0 0-.566-1.239 11.41 11.41 0 0 0 4.769-3.366ZM10 3.707a8.82 8.82 0 0 1 2-.238 8.5 8.5 0 0 1 5.664 2.152 9.608 9.608 0 0 1-4.476 3.087A45.755 45.755 0 0 0 10 3.707Zm-6.358 6.555a8.57 8.57 0 0 1 4.73-5.981 53.99 53.99 0 0 1 3.168 4.941 32.078 32.078 0 0 1-7.9 1.04h.002Zm2.01 7.46a8.51 8.51 0 0 1-2.2-5.707v-.262a31.641 31.641 0 0 0 8.777-1.219c.243.477.477.964.692 1.449-.114.032-.227.067-.336.1a13.569 13.569 0 0 0-6.942 5.636l.009.003ZM12 20.556a8.508 8.508 0 0 1-5.243-1.8 11.717 11.717 0 0 1 6.7-5.332.509.509 0 0 1 .055-.02 35.65 35.65 0 0 1 1.819 6.476 8.476 8.476 0 0 1-3.331.676Zm4.772-1.462A37.232 37.232 0 0 0 15.113 13a12.513 12.513 0 0 1 5.321.364 8.56 8.56 0 0 1-3.66 5.73h-.002Z" clip-rule="evenodd"/></svg>
<span class="sr-only">Dribbble account</span>
</a>
</div>
</div>
</div>
</footer>
Sticky footer #
Use this example to set create a sticky footer by using a fixed position to the bottom of the document page as the user scrolls up or down the main content area.
Toggle RTL mode
Toggle dark mode
Loading...
Copy to clipboard
<footer class="fixed bottom-0 left-0 z-20 w-full p-4 bg-neutral-primary-soft border-t border-default shadow-sm md:flex md:items-center md:justify-between md:p-6">
<span class="text-sm text-body sm:text-center">© 2023 <a href="https://flowbite.com/" class="hover:underline">Flowbite™</a>. All Rights Reserved.
</span>
<ul class="flex flex-wrap items-center mt-3 text-sm font-medium text-body sm:mt-0">
<li>
<a href="#" class="hover:underline me-4 md:me-6">About</a>
</li>
<li>
<a href="#" class="hover:underline me-4 md:me-6">Privacy Policy</a>
</li>
<li>
<a href="#" class="hover:underline me-4 md:me-6">Licensing</a>
</li>
<li>
<a href="#" class="hover:underline">Contact</a>
</li>
</ul>
</footer>
More examples #
For more footer examples you can check out the footer sections from Flowbite Blocks:
