Use our Tailwind CSS Footer to present your website/web app as clearly and efficiently as possible.
Below we are presenting a simple Footer component example.
<footer class="flex w-full flex-row flex-wrap items-center justify-center gap-y-6 gap-x-12 border-t border-blue-gray-50 py-6 text-center md:justify-between">
<p class="block font-sans text-base font-normal leading-relaxed text-blue-gray-900 antialiased">
© 2023 Material Tailwind
</p>
<ul class="flex flex-wrap items-center gap-y-2 gap-x-8">
<li>
<a
href="#"
class="block font-sans text-base font-normal leading-relaxed text-blue-gray-900 antialiased transition-colors hover:text-pink-500 focus:text-pink-500"
>
About Us
</a>
</li>
<li>
<a
href="#"
class="block font-sans text-base font-normal leading-relaxed text-blue-gray-900 antialiased transition-colors hover:text-pink-500 focus:text-pink-500"
>
License
</a>
</li>
<li>
<a
href="#"
class="block font-sans text-base font-normal leading-relaxed text-blue-gray-900 antialiased transition-colors hover:text-pink-500 focus:text-pink-500"
>
Contribute
</a>
</li>
<li>
<a
href="#"
class="block font-sans text-base font-normal leading-relaxed text-blue-gray-900 antialiased transition-colors hover:text-pink-500 focus:text-pink-500"
>
Contact Us
</a>
</li>
</ul>
</footer><footer class="w-full bg-white p-8">
<div class="flex flex-row flex-wrap items-center justify-center gap-y-6 gap-x-12 bg-white text-center md:justify-between">
<img src="/img/favicon.png" alt="logo-ct" class="w-10" />
<ul class="flex flex-wrap items-center gap-y-2 gap-x-8">
<li>
<a
href="#"
class="block font-sans text-base font-normal leading-relaxed text-blue-gray-900 antialiased transition-colors hover:text-pink-500 focus:text-pink-500"
>
About Us
</a>
</li>
<li>
<a
href="#"
class="block font-sans text-base font-normal leading-relaxed text-blue-gray-900 antialiased transition-colors hover:text-pink-500 focus:text-pink-500"
>
License
</a>
</li>
<li>
<a
href="#"
class="block font-sans text-base font-normal leading-relaxed text-blue-gray-900 antialiased transition-colors hover:text-pink-500 focus:text-pink-500"
>
Contribute
</a>
</li>
<li>
<a
href="#"
class="block font-sans text-base font-normal leading-relaxed text-blue-gray-900 antialiased transition-colors hover:text-pink-500 focus:text-pink-500"
>
Contact Us
</a>
</li>
</ul>
</div>
<hr class="my-8 border-blue-gray-50" />
<p class="block text-center font-sans text-base font-normal leading-relaxed text-blue-gray-900 antialiased">
© 2023 Material Tailwind
</p>
</footer>