BASIC-LIBRARY / SECTION / FOOTER
Footer Eleven
@import url("/template/basic-library/section/footer/footer-eleven/raw/styles.css");
<footer class="bg-white pt-4 sm:pt-6 lg:pt-8">
<div
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="flex flex-col items-center justify-between gap-2 border-b border-t pt-6 pb-6 py-6 md:flex-row"
>
<div class="mb-3 text-center md:mb-0 md:text-left">
<span class="uppercase tracking-widest font-bold text-gray-800">
Stay Informed
</span>
<p class="text-gray-500">
Join our mailing list for product tips and updates
</p>
</div>
<form class="flex w-full gap-2 md:max-w-md">
<input
placeholder="Email address"
class="placeholder-gray-500 transition duration-100 w-full flex-1 rounded border bg-gray-50 pl-3 pr-3 px-3 pt-2 pb-2 py-2 text-gray-800 outline-none ring-indigo-300 focus:ring"
/>
<button
class="inline-block transition duration-100 active:bg-indigo-700 rounded bg-indigo-500 pl-8 pr-8 px-8 pt-2 pb-2 py-2 text-center text-sm font-semibold text-white outline-none ring-indigo-300 hover:bg-indigo-600 focus-visible:ring md:text-base"
>
Subscribe
</button>
</form>
</div>
</div>
<div class="pt-12">
<div
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 lg:gap-8"
>
<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">
Brandloop provides intuitive marketing tools for modern teams to
collaborate, analyze, and grow with confidence.
</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"
>
Campaign Builder
</a>
</div>
<div class>
<a
href="#"
class="transition duration-100 active:text-indigo-600 text-gray-500 hover:text-indigo-500"
>
Automation Tools
</a>
</div>
<div class>
<a
href="#"
class="transition duration-100 active:text-indigo-600 text-gray-500 hover:text-indigo-500"
>
Pricing Plans
</a>
</div>
<div class>
<a
href="#"
class="transition duration-100 active:text-indigo-600 text-gray-500 hover:text-indigo-500"
>
Case Studies
</a>
</div>
</nav>
</div>
<div class>
<div class="uppercase tracking-widest mb-4 font-bold text-gray-800">
Team
</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"
>
Executive Board
</a>
</div>
<div class>
<a
href="#"
class="transition duration-100 active:text-indigo-600 text-gray-500 hover:text-indigo-500"
>
Join Us
</a>
</div>
<div class>
<a
href="#"
class="transition duration-100 active:text-indigo-600 text-gray-500 hover:text-indigo-500"
>
Press Room
</a>
</div>
<div class>
<a
href="#"
class="transition duration-100 active:text-indigo-600 text-gray-500 hover:text-indigo-500"
>
News & Updates
</a>
</div>
</nav>
</div>
<div class>
<div class="uppercase tracking-widest mb-4 font-bold text-gray-800">
Resources
</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"
>
Help Center
</a>
</div>
<div class>
<a
href="#"
class="transition duration-100 active:text-indigo-600 text-gray-500 hover:text-indigo-500"
>
Developer Docs
</a>
</div>
<div class>
<a
href="#"
class="transition duration-100 active:text-indigo-600 text-gray-500 hover:text-indigo-500"
>
Forum
</a>
</div>
<div class>
<a
href="#"
class="transition duration-100 active:text-indigo-600 text-gray-500 hover:text-indigo-500"
>
Support Tickets
</a>
</div>
</nav>
</div>
<div class>
<div class="uppercase tracking-widest mb-4 font-bold text-gray-800">
Compliance
</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"
>
Service Terms
</a>
</div>
<div class>
<a
href="#"
class="transition duration-100 active:text-indigo-600 text-gray-500 hover:text-indigo-500"
>
Data Privacy
</a>
</div>
<div class>
<a
href="#"
class="transition duration-100 active:text-indigo-600 text-gray-500 hover:text-indigo-500"
>
Consent Settings
</a>
</div>
</nav>
</div>
</div>
<div class="border-t pt-8 pb-8 py-8 text-center text-sm text-gray-400">
© 2022 - tailsections.com. Built for forward-thinking businesses.
</div>
</div>
</div>
</footer>
© 2025 tailsections.com. All rights reserved