BASIC-LIBRARY / SECTION / FOOTER
Footer Three
@import url("/template/basic-library/section/footer/footer-three/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="-mb-10 -mx-4 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/6">
<h2
class="title-font tracking-widest font-medium text-gray-900 text-sm mb-3"
>
SHOP
</h2>
<nav class="list-none mb-10">
<li class>
<a class="text-gray-600 hover:text-gray-800">Men's Apparel</a>
</li>
<li class>
<a class="text-gray-600 hover:text-gray-800">
Women's Footwear
</a>
</li>
<li class>
<a class="text-gray-600 hover:text-gray-800">Kids Collection</a>
</li>
<li class>
<a class="text-gray-600 hover:text-gray-800">Accessories</a>
</li>
</nav>
</div>
<div class="w-full pl-4 pr-4 px-4 md:w-1/2 lg:w-1/6">
<h2
class="title-font tracking-widest font-medium text-gray-900 text-sm mb-3"
>
SUPPORT
</h2>
<nav class="list-none mb-10">
<li class>
<a class="text-gray-600 hover:text-gray-800">Shipping Info</a>
</li>
<li class>
<a class="text-gray-600 hover:text-gray-800">
Returns & Exchanges
</a>
</li>
<li class>
<a class="text-gray-600 hover:text-gray-800">Order Tracking</a>
</li>
<li class>
<a class="text-gray-600 hover:text-gray-800">Contact Us</a>
</li>
</nav>
</div>
<div class="w-full pl-4 pr-4 px-4 md:w-1/2 lg:w-1/6">
<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</a></li>
<li class>
<a class="text-gray-600 hover:text-gray-800">Sustainability</a>
</li>
</nav>
</div>
<div class="w-full pl-4 pr-4 px-4 md:w-1/2 lg:w-1/6">
<h2
class="title-font tracking-widest font-medium text-gray-900 text-sm mb-3"
>
FEATURES
</h2>
<nav class="list-none mb-10">
<li class>
<a class="text-gray-600 hover:text-gray-800">Gift Cards</a>
</li>
<li class>
<a class="text-gray-600 hover:text-gray-800">Size Guide</a>
</li>
<li class>
<a class="text-gray-600 hover:text-gray-800">Affiliate Program</a>
</li>
<li class>
<a class="text-gray-600 hover:text-gray-800">Newsletter</a>
</li>
</nav>
</div>
<div class="w-full pl-4 pr-4 px-4 md:w-1/2 lg:w-1/6">
<h2
class="title-font tracking-widest font-medium text-gray-900 text-sm mb-3"
>
LEGAL
</h2>
<nav class="list-none mb-10">
<li class>
<a class="text-gray-600 hover:text-gray-800">Privacy Policy</a>
</li>
<li class>
<a class="text-gray-600 hover:text-gray-800">Terms of Service</a>
</li>
<li class>
<a class="text-gray-600 hover:text-gray-800">Cookie Settings</a>
</li>
<li class>
<a class="text-gray-600 hover:text-gray-800">Accessibility</a>
</li>
</nav>
</div>
<div class="w-full pl-4 pr-4 px-4 md:w-1/2 lg:w-1/6">
<h2
class="title-font tracking-widest font-medium text-gray-900 text-sm mb-3"
>
COMMUNITY
</h2>
<nav class="list-none mb-10">
<li class><a class="text-gray-600 hover:text-gray-800">Events</a></li>
<li class>
<a class="text-gray-600 hover:text-gray-800">Ambassadors</a>
</li>
<li class><a class="text-gray-600 hover:text-gray-800">Blog</a></li>
<li class><a class="text-gray-600 hover:text-gray-800">Forums</a></li>
</nav>
</div>
</div>
</div>
<div class="border-t border-gray-200">
<div
class="container pl-5 pr-5 px-5 pt-8 pb-8 py-8 flex flex-wrap ml-auto mr-auto mx-auto items-center max-w-screen-2xl"
>
<div
class="flex flex-wrap justify-center items-end md:flex-nowrap md:justify-start"
>
<div class="relative w-40 mr-2 sm:w-64 sm:mr-4">
<label for="footer-field" class="leading-7 text-sm text-gray-600">
Join Our List
</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:ring-2 focus:bg-transparent 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="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"
>
Subscribe
</button>
<div
class="text-gray-500 text-sm mt-2 text-center sm:text-left md:ml-6 md:mt-0"
>
<span data-node-handle="base-text" class="inline-block h-auto w-auto">
Get early access to new arrivals
</span>
<br class="lg:block hidden" />
<span data-node-handle="base-text" class="inline-block h-auto w-auto">
and exclusive promotions
</span>
</div>
</div>
<span
class="inline-flex mt-6 w-full justify-center md:justify-start md:w-auto lg:ml-auto lg:mt-0"
>
<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>
<div class="bg-gray-100">
<div
class="container ml-auto mr-auto mx-auto pt-4 pb-4 py-4 pl-5 pr-5 px-5 flex flex-wrap flex-col max-w-screen-2xl sm:flex-row"
>
<div class="text-gray-500 text-sm text-center sm:text-left">
<span data-node-handle="base-text" class="inline-block h-auto w-auto">
© 2025 tailsections.com —
</span>
<a
href="https://twitter.com/tailsections"
class="text-gray-600 ml-1"
target="_blank"
rel="noopener noreferrer"
>
@tailsections
</a>
</div>
<span
class="mt-2 w-full text-center text-gray-500 text-sm sm:ml-auto sm:mt-0 sm:w-auto sm:text-left"
>
Built for creators and explorers alike
</span>
</div>
</div>
</footer>
© 2025 tailsections.com. All rights reserved