Sections
Tailwind CSS Footer Sections - Madhuranjan UI
Explore our collection of footer designs that provide a polished finish to your website. Each layout is responsive and customizable to fit your brand’s needs.
Simple Footer
A minimalistic footer that keeps your website clean and focused.
1 <footer class="border-t border-neutral-800 bg-neutral-900 text-neutral-300">
2 <div class="container mx-auto max-w-7xl px-4 py-12 text-center sm:px-6 lg:px-8">
3 <div class="mb-6">
4 <a href="/" class="inline-flex items-center justify-center text-2xl font-semibold text-white">
5 <svg class="mr-2 h-6 w-6 text-white" fill="currentColor" viewBox="0 0 24 24">
6 <path d="M12 2L2 7l10 5 10-5-10-5zm0 13l10-5v10l-10 5-10-5V10l10 5z" />
7 </svg>
8 MadhurajnanUI
9 </a>
10 <p class="mx-auto mt-2 max-w-md text-sm text-neutral-400">Build fast with clean, responsive, and modern Tailwind CSS components built for dark and light themes.</p>Footer with Links
A footer layout that includes navigation links for quick access.
Newsletter
Subscribe to our newsletter for the latest updates.
© 2023 MadhurajnanUI. All rights reserved.
1 <div class="bg-gray-900 px-4 py-5 text-gray-300 p-3">
2 <div class="mx-auto grid max-w-7xl grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-4">
3 <div class="space-y-4">
4 <div class="flex items-center space-x-2">
5 <svg class="h-8 w-8 text-purple-500" fill="currentColor" viewBox="0 0 24 24">
6 <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
7 </svg>
8 <span class="text-xl font-bold text-white">MadhurajnanUI</span>
9 </div>
10 <p class="text-gray-400">Build modern websites without ever leaving your HTML.</p>Footer with Company Image
Enhance your branding with a footer that features your company logo or image.
Building beautiful interfaces with utility-first CSS. Join our community of frontend developers.
Newsletter
Subscribe to our newsletter for the latest updates.
We respect your privacy. Unsubscribe at any time.
1 <div class="border-t border-gray-800 bg-gray-900 px-4 py-12 text-gray-300 sm:px-6 lg:px-8 dark:border-gray-700">
2 <div class="mx-auto max-w-7xl">
3 <div class="mb-10 grid grid-cols-1 gap-10 md:grid-cols-2">
4 <div class="space-y-5">
5 <div class="flex items-center">
6 <img src="https://placehold.co/40x40" alt="Logo" class="h-10 w-10 rounded-lg" />
7 <span class="ml-3 text-xl font-bold text-white">MadhuranjanUI</span>
8 </div>
9 <p class="text-gray-400">Building beautiful interfaces with utility-first CSS. Join our community of frontend developers.</p>
10 <div class="flex space-x-4">Footer with App Download
Encourage app downloads with a dedicated section that highlights your mobile app.
Elevating digital experiences through innovative design and cutting-edge technology.
We respect your privacy. Unsubscribe at any time.
1 <div class="bg-gradient-to-b from-gray-50 to-white px-6 py-16 sm:px-12 lg:px-24 dark:from-gray-900 dark:to-gray-800">
2 <div class="mx-auto max-w-7xl">
3 <div class="flex flex-col items-center justify-between gap-12 lg:flex-row">
4 <div class="flex flex-col items-center lg:items-start">
5 <div class="flex items-center space-x-3">
6 <div class="h-12 w-12 rounded-xl bg-gradient-to-br from-purple-500 to-blue-500 shadow-lg"></div>
7 <span class="text-2xl font-bold tracking-tight text-gray-900 dark:text-white">luminex</span>
8 </div>
9
10 <p class="mt-6 max-w-md text-center text-gray-500 lg:text-left dark:text-gray-400">Elevating digital experiences through innovative design and cutting-edge technology.</p>