BASIC-LIBRARY / SECTION / FOOTER
Footer Five
@import url("/template/basic-library/section/footer/footer-five/raw/styles.css");
<footer class="body-font text-gray-600">
<div
class="container pl-5 pr-5 px-5 pt-24 pb-24 py-24 ml-auto mr-auto mx-auto max-w-screen-2xl"
>
<div class="order-first flex flex-wrap text-center md:text-left">
<div class="w-full pl-4 pr-4 px-4 md:w-1/2 lg:w-1/4">
<h2
class="title-font tracking-widest font-medium text-gray-900 text-sm mb-3"
>
SOLUTIONS
</h2>
<nav class="list-none mb-10">
<li class>
<a class="text-gray-600 hover:text-gray-800">Customer Insights</a>
</li>
<li class>
<a class="text-gray-600 hover:text-gray-800">Workflow Automation</a>
</li>
<li class>
<a class="text-gray-600 hover:text-gray-800">Sales Enablement</a>
</li>
<li class>
<a class="text-gray-600 hover:text-gray-800">AI Integration</a>
</li>
</nav>
</div>
<div class="w-full pl-4 pr-4 px-4 md:w-1/2 lg:w-1/4">
<h2
class="title-font tracking-widest font-medium text-gray-900 text-sm mb-3"
>
RESOURCES
</h2>
<nav class="list-none mb-10">
<li class>
<a class="text-gray-600 hover:text-gray-800">Documentation</a>
</li>
<li class>
<a class="text-gray-600 hover:text-gray-800">API Reference</a>
</li>
<li class>
<a class="text-gray-600 hover:text-gray-800">Community Forum</a>
</li>
<li class>
<a class="text-gray-600 hover:text-gray-800">Developer Blog</a>
</li>
</nav>
</div>
<div class="w-full pl-4 pr-4 px-4 md:w-1/2 lg:w-1/4">
<h2
class="title-font tracking-widest font-medium text-gray-900 text-sm mb-3"
>
COMPANY
</h2>
<nav class="list-none mb-10">
<li class>
<a class="text-gray-600 hover:text-gray-800">About Us</a>
</li>
<li class>
<a class="text-gray-600 hover:text-gray-800">Careers</a>
</li>
<li class>
<a class="text-gray-600 hover:text-gray-800">Press Room</a>
</li>
<li class>
<a class="text-gray-600 hover:text-gray-800">Contact</a>
</li>
</nav>
</div>
<div class="w-full pl-4 pr-4 px-4 md:w-1/2 lg:w-1/4">
<h2
class="title-font tracking-widest font-medium text-gray-900 text-sm mb-3"
>
SUBSCRIBE
</h2>
<div
class="flex flex-wrap justify-center items-end md:flex-nowrap md:justify-start lg:flex-wrap xl:flex-nowrap"
>
<div class="relative w-40 mr-2 sm:w-auto sm:mr-4 lg:mr-0 xl:mr-4">
<label for="footer-field" class="leading-7 text-sm text-gray-600">
Your email
</label>
<input
type="text"
name="footer-field"
class="transition-colors duration-200 ease-in-out w-full bg-gray-100 bg-opacity-50 rounded border border-gray-300 focus:bg-transparent focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500 text-base outline-none text-gray-700 pt-1 pb-1 py-1 pl-3 pr-3 px-3 leading-8"
/>
</div>
<button
class="flex-shrink-0 inline-flex text-white bg-indigo-500 border-0 pt-2 pb-2 py-2 pl-6 pr-6 px-6 focus:outline-none rounded hover:bg-indigo-600 lg:mt-2 xl:mt-0"
>
Join
</button>
</div>
<div class="text-gray-500 text-sm mt-2 text-center md:text-left">
<span data-node-handle="base-text" class="inline-block h-auto w-auto">
Get product updates and new feature alerts
</span>
<br class="lg:block hidden" />
<span data-node-handle="base-text" class="inline-block h-auto w-auto">
delivered straight to your inbox
</span>
</div>
</div>
</div>
</div>
<div class="bg-gray-100">
<div
class="container pl-5 pr-5 px-5 pt-6 pb-6 py-6 ml-auto mr-auto mx-auto flex items-center flex-col max-w-screen-2xl sm:flex-row"
>
<img
class="max-w-full w-40 h-max object-center"
src="https://tailsections.com/logo.png"
/>
<div class="text-sm text-gray-500 mt-4 sm:ml-6 sm:mt-0">
<span data-node-handle="base-text" class="inline-block h-auto w-auto">
© 2025 tailsections —
</span>
<a
href="https://twitter.com/tailsections"
rel="noopener noreferrer"
class="text-gray-600 ml-1"
target="_blank"
>
@tailsections
</a>
</div>
<span
class="inline-flex mt-4 justify-center sm:ml-auto sm:mt-0 sm:justify-start"
>
<a class="text-gray-500">
<svg
fill="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
class="w-5 h-5"
viewBox="0 0 24 24"
>
<path
d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"
></path>
</svg>
</a>
<a class="ml-3 text-gray-500">
<svg
fill="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
class="w-5 h-5"
viewBox="0 0 24 24"
>
<path
d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"
></path>
</svg>
</a>
<a class="ml-3 text-gray-500">
<svg
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
class="w-5 h-5"
viewBox="0 0 24 24"
>
<rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
<path
d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"
></path>
</svg>
</a>
<a class="ml-3 text-gray-500">
<svg
fill="currentColor"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="0"
class="w-5 h-5"
viewBox="0 0 24 24"
>
<path
stroke="none"
d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"
></path>
<circle cx="4" cy="4" r="2" stroke="none"></circle>
</svg>
</a>
</span>
</div>
</div>
</footer>
© 2025 tailsections.com. All rights reserved