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

602

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
Basic footer with subscribe to the newsletter section

Author:
Mr Robot

2 years ago

8.9k
Subscribe to our newsletter section

Author:
Conan Hilton

2 years ago

10.9k
beautifull portfolio page
I create a portfolio page

Author:
Akram Khan

10 months ago

1.4k
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.4k
NebulaFooter
Footer

Author:
Juraj

2 months ago

239
Footer blue theme

Author:
Leon Bachmann

2 years ago

12.9k
Footer - Modern minimal style
clean and uncluttered, following a minimalist approach

Author:
Nikita

1 year ago

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

Author:
Ron Hicks

2 years ago

10.7k
Responsive footer
Footer section with icons

Author:
Prajwal Hallale

2 years ago

12.3k
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.1k
canvas fully covers
canvas fully covers

Author:
ABDESLAMI ACHRAF

5 months ago

2.4k
Horizontal footer
Use this horizontal footer tailwind css example if you want horizontal footer layout side by side, which includes sitemap links, brand logo and social media accounts.

Author:
Pagedone

1 year ago

2k

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