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

511

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

Subscribe to our newsletter section

Author:
Conan Hilton

2 years ago

10.6k
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.1k
Footer with background
Apply background color to your footer to provide immense look of footer area.

Author:
Pagedone

1 year ago

2k
Accordion block
FAQ accordion component, featuring expandable sections with smooth transitions and a clean, modern design

Author:
Maxim

5 months ago

961
beautifull footer
We create a Advance animated footer section using tailwindcss and custom css

Author:
Akram Khan

10 months ago

1.5k
Home page
Home page для ПО, страница для входа в приложение.

Author:
Алла Телегина

2 months ago

415
Footer with images

Author:
Mr Robot

2 years ago

9k
Minimal responsive footer

Author:
Mr Robot

2 years ago

10.9k
Footer with App buttons
This example can be used if you want add your app buttons of store for download with brand logo, sitemap links and social media accounts.

Author:
Pagedone

1 year ago

1.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

1.9k
canvas fully covers
canvas fully covers

Author:
ABDESLAMI ACHRAF

5 months ago

2.3k
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

2.7k

Explore components by Tags

Didn't find component you were looking for?

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