Home
Maxim
Footer with mobile accordion

Footer with mobile accordion

A modern dark-themed footer component built with Tailwind CSS, featuring a responsive 5-column grid layout for desktop that transforms into an accordion menu on mobile devices. Perfect for beverage, e-commerce, or corporate websites, it includes organized navigation categories, hover effects on links, social media integration, and a clean copyright section - all styled with a professional stone-gray color scheme.

This tailwind example is contributed by Maxim, on 29-Dec-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is collapsible

Footer Accordion

Author Maxim

1.4k

1

Fork Fullscreen

<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<footer class="bg-stone-900">
	<div class="max-w-screen-xl mx-auto p-4 md:p-8">
		<div class="hidden md:grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4 md:gap-8">
			<div class="mb-6 md:mb-0">
				<h5 class="text-base md:text-lg font-medium mb-2 pb-2 border-b border-stone-700 text-white uppercase">
					Spirits </h5>
				<ul class="space-y-2 md:space-y-3 mt-4 text-white text-base">
					<li><a href="https://lqrs.com/spirits/whiskey/"
							class="underline underline-offset-8 hover:no-underline decoration-stone-700">Whiskey</a>
					</li>
					<li><a href="https://lqrs.com/spirits/tequila/"
							class="underline underline-offset-8 hover:no-underline decoration-stone-700">Tequila &amp;
							Mezcal</a></li>
					<li><a href="https://lqrs.com/spirits/bc/"
							class="underline underline-offset-8 hover:no-underline decoration-stone-700">Brandy &amp;
							Cognac</a></li>
					<li><a href="https://lqrs.com/spirits/vodka/"
							class="underline underline-offset-8 hover:no-underline decoration-stone-700">Vodka</a></li>
					<li><a href="https://lqrs.com/spirits/aav/"
							class="underline underline-offset-8 hover:no-underline decoration-stone-700">Amaro, Aperitif
							&amp; Vermouth</a></li>
					<li><a href="https://lqrs.com/spirits/lq/"
							class="underline underline-offset-8 hover:no-underline decoration-stone-700">Liqueurs &amp;
							Cordials</a></li>
					<li><a href="https://lqrs.com/spirits/gin/"
							class="underline underline-offset-8 hover:no-underline decoration-stone-700">Gin</a></li>
					<li><a href="https://lqrs.com/spirits/rum/"
							class="underline underline-offset-8 hover:no-underline decoration-stone-700">Rum</a></li>
				</ul>
			</div>
			<div class="mb-6 md:mb-0">
				<h5 class="text-base md:text-lg font-medium mb-2 pb-2 border-b border-stone-700 text-white uppercase">
					Wine &amp; Sake </h5>
				<ul class="space-y-2 md:space-y-3 mt-4 text-white text-base">
					<li><a href="https://lqrs.com/wine/red-wine/"
							class="underline underline-offset-8 hover:no-underline decoration-stone-700">Red Wine</a>
					</li>
					<li><a href="https://lqrs.com/wine/white-wine/"
							class="underline underline-offset-8 hover:no-underline decoration-stone-700">White Wine</a>
					</li>
					<li><a href="https://lqrs.com/wine/sparkling/"
							class="underline underline-offset-8 hover:no-underline decoration-stone-700">Champagne &amp;
							Sparkling</a></li>
					<li><a href="https://lqrs.com/wine/rose-wine/"
							class="underline underline-offset-8 hover:no-underline decoration-stone-700">Rosé Wine</a>
					</li>
					<li><a href="https://lqrs.com/wine/sake-soju/"
							class="underline underline-offset-8 hover:no-underline decoration-stone-700">Sake &amp;
							Soju</a></li>
					<li><a href="https://lqrs.com/wine/honey-wine/"
							class="underline underline-offset-8 hover:no-underline decoration-stone-700">Honey Wine</a>
					</li>
					<li><a href="https://lqrs.com/grape/"
							class="underline underline-offset-8 hover:no-underline decoration-stone-700">Grapes</a></li>
				</ul>
			</div>
			<div class="mb-6 md:mb-0">
				<h5 class="text-base md:text-lg font-medium mb-2 pb-2 border-b border-stone-700 text-white uppercase">
					Other Drinks </h5>
				<ul class="space-y-2 md:space-y-3 mt-4 text-white text-base">
					<li><a href="https://lqrs.com/beer/"
							class="underline underline-offset-8 hover:no-underline decoration-stone-700">Beer</a></li>
					<li><a href="https://lqrs.com/cider/"
							class="underline underline-offset-8 hover:no-underline decoration-stone-700">Cider</a></li>
					<li><a href="https://lqrs.com/energy/"
							class="underline underline-offset-8 hover:no-underline decoration-stone-700">Energy
							Drinks</a></li>
					<li><a href="https://lqrs.com/soft-drinks/"
							class="underline underline-offset-8 hover:no-underline decoration-stone-700">Soft Drinks</a>
					</li>
					<li><a href="https://lqrs.com/water/"
							class="underline underline-offset-8 hover:no-underline decoration-stone-700">Water</a></li>
					<li><a href="https://lqrs.com/mocktails/"
							class="underline underline-offset-8 hover:no-underline decoration-stone-700">Mocktails</a>
					</li>
					<li><a href="https://lqrs.com/recipes/"
							class="underline underline-offset-8 hover:no-underline decoration-stone-700">Cocktails</a>
					</li>
					<li><a href="https://lqrs.com/pairings/"
							class="underline underline-offset-8 hover:no-underline decoration-stone-700">Pairings</a>
					</li>
				</ul>
			</div>
			<div class="mb-6 md:mb-0">
				<h5 class="text-base md:text-lg font-medium mb-2 pb-2 border-b border-stone-700 text-white uppercase">
					Explore </h5>
				<ul class="space-y-2 md:space-y-3 mt-4 text-white text-base">
					<li><a href="https://lqrs.com/collections/"
							class="underline underline-offset-8 hover:no-underline decoration-stone-700">Collections</a>
					</li>
					<li><a href="https://lqrs.com/brands/"
							class="underline underline-offset-8 hover:no-underline decoration-stone-700">Brands</a></li>
					<li><a href="https://lqrs.com/country/"
							class="underline underline-offset-8 hover:no-underline decoration-stone-700">Countries</a>
					</li>
					<li><a href="https://lqrs.com/region/"
							class="underline underline-offset-8 hover:no-underline decoration-stone-700">Regions</a>
					</li>
					<li><a href="https://lqrs.com/org/"
							class="underline underline-offset-8 hover:no-underline decoration-stone-700">Companies</a>
					</li>
					<li><a href="https://lqrs.com/events/"
							class="underline underline-offset-8 hover:no-underline decoration-stone-700">Events</a></li>
				</ul>
			</div>
			<div class="mb-6 md:mb-0">
				<h5 class="text-base md:text-lg font-medium mb-2 pb-2 border-b border-stone-700 text-white uppercase">
					LQRS </h5>
				<ul class="space-y-2 md:space-y-3 mt-4 text-white text-base">
					<li><a href="https://lqrs.com/about/"
							class="underline underline-offset-8 hover:no-underline decoration-stone-700">About Us</a>
					</li>
					<li><a href="https://lqrs.com/contact-us/"
							class="underline underline-offset-8 hover:no-underline decoration-stone-700">Contact Us</a>
					</li>
					<li><a href="https://lqrs.com/terms-of-use/"
							class="underline underline-offset-8 hover:no-underline decoration-stone-700">Terms of
							Use</a></li>
					<li><a href="https://lqrs.com/privacy-policy/"
							class="underline underline-offset-8 hover:no-underline decoration-stone-700">Privacy
							Policy</a></li>
				</ul>
			</div>
		</div>
		<div class="md:hidden divide-y divide-stone-700">
			<details class="group cursor-pointer">
				<summary
					class="flex list-none items-center justify-between py-4 text-lg font-medium text-white [&::-webkit-details-marker]:hidden">
					<span class="text-left text-lg">Spirits</span>
					<div class="text-white">
						<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
							stroke="currentColor"
							class="block h-5 w-5 transition-all duration-300 group-open:rotate-180">
							<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
						</svg>
					</div>
				</summary>
				<ul class="pb-4 space-y-2 text-white text-left text-base">
					<li><a href="https://lqrs.com/spirits/whiskey/"
							class="underline underline-offset-8 hover:no-underline decoration-stone-700">Whiskey</a>
					</li>
					<li><a href="https://lqrs.com/spirits/tequila/"
							class="underline underline-offset-8 hover:no-underline decoration-stone-700">Tequila &amp;
							Mezcal</a></li>
					<li><a href="https://lqrs.com/spirits/bc/"
							class="underline underline-offset-8 hover:no-underline decoration-stone-700">Brandy &amp;
							Cognac</a></li>
					<li><a href="https://lqrs.com/spirits/vodka/"
							class="underline underline-offset-8 hover:no-underline decoration-stone-700">Vodka</a></li>
					<li><a href="https://lqrs.com/spirits/aav/"
							class="underline underline-offset-8 hover:no-underline decoration-stone-700">Amaro, Aperitif
							&amp; Vermouth</a></li>
					<li><a href="https://lqrs.com/spirits/lq/"
							class="underline underline-offset-8 hover:no-underline decoration-stone-700">Liqueurs &amp;
							Cordials</a></li>
					<li><a href="https://lqrs.com/spirits/gin/"
							class="underline underline-offset-8 hover:no-underline decoration-stone-700">Gin</a></li>
					<li><a href="https://lqrs.com/spirits/rum/"
							class="underline underline-offset-8 hover:no-underline decoration-stone-700">Rum</a></li>
				</ul>
			</details>
			<details class="group cursor-pointer">
				<summary
					class="flex list-none items-center justify-between py-4 text-lg font-medium text-white [&::-webkit-details-marker]:hidden">
					<span class="text-left text-lg">Wine &amp; Sake</span>
					<div class="text-white">
						<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
							stroke="currentColor"
							class="block h-5 w-5 transition-all duration-300 group-open:rotate-180">
							<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
						</svg>
					</div>
				</summary>
				<ul class="pb-4 space-y-2 text-white text-left text-base">
					<li><a href="https://lqrs.com/wine/red-wine/"
							class="underline underline-offset-8 hover:no-underline decoration-stone-700">Red Wine</a>
					</li>
					<li><a href="https://lqrs.com/wine/white-wine/"
							class="underline underline-offset-8 hover:no-underline decoration-stone-700">White Wine</a>
					</li>
					<li><a href="https://lqrs.com/wine/sparkling/"
							class="underline underline-offset-8 hover:no-underline decoration-stone-700">Champagne &amp;
							Sparkling</a></li>
					<li><a href="https://lqrs.com/wine/rose-wine/"
							class="underline underline-offset-8 hover:no-underline decoration-stone-700">Rosé Wine</a>
					</li>
					<li><a href="https://lqrs.com/wine/sake-soju/"
							class="underline underline-offset-8 hover:no-underline decoration-stone-700">Sake &amp;
							Soju</a></li>
					<li><a href="https://lqrs.com/wine/honey-wine/"
							class="underline underline-offset-8 hover:no-underline decoration-stone-700">Honey Wine</a>
					</li>
					<li><a href="https://lqrs.com/grape/"
							class="underline underline-offset-8 hover:no-underline decoration-stone-700">Grapes</a></li>
				</ul>
			</details>
			<details class="group cursor-pointer">
				<summary
					class="flex list-none items-center justify-between py-4 text-lg font-medium text-white [&::-webkit-details-marker]:hidden">
					<span class="text-left text-lg">Other Drinks</span>
					<div class="text-white">
						<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
							stroke="currentColor"
							class="block h-5 w-5 transition-all duration-300 group-open:rotate-180">
							<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
						</svg>
					</div>
				</summary>
				<ul class="pb-4 space-y-2 text-white text-left text-base">
					<li><a href="https://lqrs.com/beer/"
							class="underline underline-offset-8 hover:no-underline decoration-stone-700">Beer</a></li>
					<li><a href="https://lqrs.com/cider/"
							class="underline underline-offset-8 hover:no-underline decoration-stone-700">Cider</a></li>
					<li><a href="https://lqrs.com/energy/"
							class="underline underline-offset-8 hover:no-underline decoration-stone-700">Energy
							Drinks</a></li>
					<li><a href="https://lqrs.com/soft-drinks/"
							class="underline underline-offset-8 hover:no-underline decoration-stone-700">Soft Drinks</a>
					</li>
					<li><a href="https://lqrs.com/water/"
							class="underline underline-offset-8 hover:no-underline decoration-stone-700">Water</a></li>
					<li><a href="https://lqrs.com/mocktails/"
							class="underline underline-offset-8 hover:no-underline decoration-stone-700">Mocktails</a>
					</li>
					<li><a href="https://lqrs.com/recipes/"
							class="underline underline-offset-8 hover:no-underline decoration-stone-700">Cocktails</a>
					</li>
					<li><a href="https://lqrs.com/pairings/"
							class="underline underline-offset-8 hover:no-underline decoration-stone-700">Pairings</a>
					</li>
				</ul>
			</details>
			<details class="group cursor-pointer">
				<summary
					class="flex list-none items-center justify-between py-4 text-lg font-medium text-white [&::-webkit-details-marker]:hidden">
					<span class="text-left text-lg">Explore</span>
					<div class="text-white">
						<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
							stroke="currentColor"
							class="block h-5 w-5 transition-all duration-300 group-open:rotate-180">
							<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
						</svg>
					</div>
				</summary>
				<ul class="pb-4 space-y-2 text-white text-left text-base">
					<li><a href="https://lqrs.com/collections/"
							class="underline underline-offset-8 hover:no-underline decoration-stone-700">Collections</a>
					</li>
					<li><a href="https://lqrs.com/brands/"
							class="underline underline-offset-8 hover:no-underline decoration-stone-700">Brands</a></li>
					<li><a href="https://lqrs.com/country/"
							class="underline underline-offset-8 hover:no-underline decoration-stone-700">Countries</a>
					</li>
					<li><a href="https://lqrs.com/region/"
							class="underline underline-offset-8 hover:no-underline decoration-stone-700">Regions</a>
					</li>
					<li><a href="https://lqrs.com/org/"
							class="underline underline-offset-8 hover:no-underline decoration-stone-700">Companies</a>
					</li>
					<li><a href="https://lqrs.com/events/"
							class="underline underline-offset-8 hover:no-underline decoration-stone-700">Events</a></li>
				</ul>
			</details>
			<details class="group cursor-pointer">
				<summary
					class="flex list-none items-center justify-between py-4 text-lg font-medium text-white [&::-webkit-details-marker]:hidden">
					<span class="text-left text-lg">LQRS</span>
					<div class="text-white">
						<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
							stroke="currentColor"
							class="block h-5 w-5 transition-all duration-300 group-open:rotate-180">
							<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
						</svg>
					</div>
				</summary>
				<ul class="pb-4 space-y-2 text-white text-left text-base">
					<li><a href="https://lqrs.com/about/"
							class="underline underline-offset-8 hover:no-underline decoration-stone-700">About Us</a>
					</li>
					<li><a href="https://lqrs.com/contact-us/"
							class="underline underline-offset-8 hover:no-underline decoration-stone-700">Contact Us</a>
					</li>
					<li><a href="https://lqrs.com/terms-of-use/"
							class="underline underline-offset-8 hover:no-underline decoration-stone-700">Terms of
							Use</a></li>
					<li><a href="https://lqrs.com/privacy-policy/"
							class="underline underline-offset-8 hover:no-underline decoration-stone-700">Privacy
							Policy</a></li>
				</ul>
			</details>
		</div>
		<div
			class="sm:mb-8 mb-2 mt-8 pt-4 border-t border-gray-700 flex flex-col sm:flex-row justify-between items-center space-y-4 sm:space-y-0">
			<p class="text-base text-stone-300">
				&copy; 2024 LQRS. All rights reserved. </p>
			<div class="flex items-center space-x-4">
				<a href="https://facebook.com/lqrscom" class="text-stone-300 hover:text-white transition-colors"
					target="_blank" rel="noopener noreferrer" aria-label="Facebook">
					<ion-icon name="logo-facebook" class="text-[24px]"></ion-icon>
				</a>
			</div>
		</div>
	</div>
</footer>

Related Examples

Basic footer
Simple footer with follow us section

Author:
Anonymous

1 year ago

2.2k
Creative with CTA buttons
Use Below tailwind css footer example with CTA buttons and site links.

Author:
Pagedone

1 year ago

2.5k
footer

Author:
isolde

2 years ago

6.6k
Footer

Author:
Ivan K

1 year ago

3.4k
Responsive Footer
source: https://kitwind.io/products/kometa/components/footers

Author:
Manuela Bianka

3 years ago

16.6k
Accordion FAQ
FAQ Accordion section without using any javascript

Author:
Sophia Baker

2 years ago

19.6k
subscribe form in Footer
You can use following subscribe form in your tailwind footer section beside contact information such as email address, phone numbers etc and You can also shows community counts.

Author:
Pagedone

1 year ago

2.9k
Footer
A footer is a critical part of any professional website. A footer ensures your website is complete, professional, user-friendly, and legally compliant. It's where users go for answers when they're done scrolling.

Author:
KULDEEP

7 months ago

1k
portifolio
skills

Author:
ishimwe prince

8 months ago

946
Header and footer with Doodle design with Tailwind CSS
Creative responsive header and footer with doodle patterns built with Tailwind CSS. Features animated SVG doodles, interactive CTA buttons, and Fully customizable components for web projects

Author:
Homayoun

2 months ago

120
Services
explore our awesome Services

Author:
ابراهيم سيد

1 year ago

2.8k
FAQ.
Super simple animated FAQ with tailwind group hoverable accordion open and close.

Author:
inbarajan P

1 year ago

2.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2026 TailwindFlex. All Rights Reserved.

v1.12