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.5k

2

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

Four columns with subscribe form
Use this example for four column footer with subscribe form, brand logo, sitemap links and social media accounts.

Author:
Pagedone

1 year ago

2.5k
Accordion section

Author:
Lyra Ravensong

3 years ago

15.4k
Call to Action (for app stores)
Download app section with Playstore and Appstore button

Author:
Ron Hicks

3 years ago

11.6k
Responsive footer

Author:
Lukas Müller

3 years ago

11.5k
portifolio
skills

Author:
ishimwe prince

9 months ago

1k
Footer
Simple Dark footer

Author:
KULDEEP

8 months ago

893
Tailwind Footer with dark version
This example can be used if you are looking for four column footer in dark version with sitemap links, brand logo, and social media accounts.

Author:
Pagedone

1 year ago

3.6k
Responsive eCommerce Footer Component with Tailwind CSS
A modern, fully responsive eCommerce footer component built with Tailwind CSS. It includes multiple sections like company info, account links, help center, categories, social media icons, payment methods, and app download buttons. Optimized for seamless mobile and desktop experiences, making it perfect for any online store or business website.

Author:
SHARIFUL ISLAM

1 year ago

1.2k
Native HTML Accordion
native html accordion summary details

Author:
Cristian

1 year ago

2.5k
Modern Responsive Footer with Tailwind CSS
This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

Author:
Ayyamperumal S

1 year ago

2.1k
Footer
A simple footer with link adjustment for smartphones

Author:
Matti

1 year ago

1.5k
Footer with social media icons
If you want to use colorful social media icons with address location, sitemap links and newsletter.

Author:
Pagedone

1 year ago

3.6k

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