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

641

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

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

2.6k
Responsive Footer
This a full responsive footer made with tailwind

Author:
Pape Toulé Yade

1 year ago

1.8k
Footer

Author:
Maxim

2 months ago

570
Minimal responsive footer

Author:
Mr Robot

2 years ago

11k
Clean & Responsive Footer Design with Tailwind CSS With CTA Button
modern and responsive footer built with Tailwind CSS to enhance website navigation, accessibility, and user experience. Featuring quick links, social media icons, copyright info, and a sleek layout, this SEO-friendly footer improves engagement and usability across all devices. Perfect for portfolios, business websites, and eCommerce stores!

Author:
Abdul Baset Bappy

2 months ago

268
Native HTML Accordion
native html accordion summary details

Author:
Cristian

1 year ago

1.7k
Small Footer

Author:
Abhijit Sen

2 years ago

11.2k
Horizontal footer with dark version
Use this example for simple horizontal layout of footer in dark version with brand logo, sitemap links and social media accounts.

Author:
Pagedone

1 year ago

2.5k
Responsive footer
Footer section with icons

Author:
Prajwal Hallale

2 years ago

12.3k
Four columns with address location
You can use this Tailwind Footer example to first show address location of your company with brand logo next to sitemap links.

Author:
Pagedone

1 year ago

1.6k
Footer

Author:
Abdul Baset Bappy

2 days ago

6
Footer with social icons

Author:
Mr Robot

2 years ago

14.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ 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

© 2025 TailwindFlex. All Rights Reserved.

v1.1