BASIC-LIBRARY / SECTION / FOOTER
Footer Six
@import url("/template/basic-library/section/footer/footer-six/raw/styles.css");
<div class="bg-white pt-4 sm:pt-10 lg:pt-12">
<footer
class="ml-auto mr-auto mx-auto max-w-screen-2xl pl-4 pr-4 px-4 md:pl-8 md:pr-8 md:px-8"
>
<div
class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 mb-16 gap-12 border-t pt-10 lg:gap-8 lg:pt-12"
>
<div class="col-span-full lg:col-span-2">
<img
class="max-w-full w-40 h-max object-center mb-4"
src="https://tailsections.com/logo.png"
/>
<p class="mb-6 text-gray-500 sm:pr-8">
tailsections.com helps design teams build responsive layouts faster
with a growing collection of professionally crafted UI components.
</p>
<div class="flex gap-4">
<a
href="#"
target="_blank"
class="transition duration-100 active:text-gray-600 text-gray-400 hover:text-gray-500"
>
<svg
class="h-5 w-5"
width="24"
height="24"
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path d="..."></path>
</svg>
</a>
<a
href="#"
target="_blank"
class="transition duration-100 active:text-gray-600 text-gray-400 hover:text-gray-500"
>
<svg
class="h-5 w-5"
width="24"
height="24"
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path d="..."></path>
</svg>
</a>
<a
href="#"
target="_blank"
class="transition duration-100 active:text-gray-600 text-gray-400 hover:text-gray-500"
>
<svg
class="h-5 w-5"
width="24"
height="24"
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path d="..."></path>
</svg>
</a>
<a
href="#"
target="_blank"
class="transition duration-100 active:text-gray-600 text-gray-400 hover:text-gray-500"
>
<svg
class="h-5 w-5"
width="24"
height="24"
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path d="..."></path>
</svg>
</a>
</div>
</div>
<div class>
<div class="uppercase tracking-widest mb-4 font-bold text-gray-800">
Features
</div>
<nav class="flex flex-col gap-4">
<div class>
<a
href="#"
class="transition duration-100 active:text-indigo-600 text-gray-500 hover:text-indigo-500"
>
Interface Kit
</a>
</div>
<div class>
<a
href="#"
class="transition duration-100 active:text-indigo-600 text-gray-500 hover:text-indigo-500"
>
Layout Builder
</a>
</div>
<div class>
<a
href="#"
class="transition duration-100 active:text-indigo-600 text-gray-500 hover:text-indigo-500"
>
Plans & Billing
</a>
</div>
<div class>
<a
href="#"
class="transition duration-100 active:text-indigo-600 text-gray-500 hover:text-indigo-500"
>
Testimonials
</a>
</div>
</nav>
</div>
<div class>
<div class="uppercase tracking-widest mb-4 font-bold text-gray-800">
Company
</div>
<nav class="flex flex-col gap-4">
<div class>
<a
href="#"
class="transition duration-100 active:text-indigo-600 text-gray-500 hover:text-indigo-500"
>
Our Story
</a>
</div>
<div class>
<a
href="#"
class="transition duration-100 active:text-indigo-600 text-gray-500 hover:text-indigo-500"
>
Leadership Team
</a>
</div>
<div class>
<a
href="#"
class="transition duration-100 active:text-indigo-600 text-gray-500 hover:text-indigo-500"
>
Careers
</a>
</div>
<div class>
<a
href="#"
class="transition duration-100 active:text-indigo-600 text-gray-500 hover:text-indigo-500"
>
Media Kit
</a>
</div>
<div class>
<a
href="#"
class="transition duration-100 active:text-indigo-600 text-gray-500 hover:text-indigo-500"
>
Newsroom
</a>
</div>
</nav>
</div>
<div class>
<div class="uppercase tracking-widest mb-4 font-bold text-gray-800">
Help
</div>
<nav class="flex flex-col gap-4">
<div class>
<a
href="#"
class="transition duration-100 active:text-indigo-600 text-gray-500 hover:text-indigo-500"
>
Get in Touch
</a>
</div>
<div class>
<a
href="#"
class="transition duration-100 active:text-indigo-600 text-gray-500 hover:text-indigo-500"
>
API Reference
</a>
</div>
<div class>
<a
href="#"
class="transition duration-100 active:text-indigo-600 text-gray-500 hover:text-indigo-500"
>
Support Chat
</a>
</div>
<div class>
<a
href="#"
class="transition duration-100 active:text-indigo-600 text-gray-500 hover:text-indigo-500"
>
Knowledge Base
</a>
</div>
</nav>
</div>
<div class>
<div class="uppercase tracking-widest mb-4 font-bold text-gray-800">
Policies
</div>
<nav class="flex flex-col gap-4">
<div class>
<a
href="#"
class="transition duration-100 active:text-indigo-600 text-gray-500 hover:text-indigo-500"
>
User Agreement
</a>
</div>
<div class>
<a
href="#"
class="transition duration-100 active:text-indigo-600 text-gray-500 hover:text-indigo-500"
>
Data Protection
</a>
</div>
<div class>
<a
href="#"
class="transition duration-100 active:text-indigo-600 text-gray-500 hover:text-indigo-500"
>
Preferences
</a>
</div>
</nav>
</div>
</div>
<div class="border-t pt-8 pb-8 py-8 text-center text-sm text-gray-400">
© 2021 - tailsections.com. Crafted with care and purpose.
</div>
</footer>
</div>
© 2025 tailsections.com. All rights reserved