footer

This tailwind example is contributed by Raul antonio de la cruz hernandez, on 27-Nov-2025. Component is made with Tailwind CSS v3. It is responsive.

Footer

Author Raul antonio de la cruz hernandez

153

Fork Fullscreen

<footer class="max-w-7xl mx-auto mt-24 pb-8">
        
        <div class="relative w-full rounded-[1.5rem] overflow-hidden bg-[#050202] text-white px-8 py-16 md:px-16 md:py-20 mb-20 shadow-2xl isolate">
            
            
            <div class="absolute inset-0 z-0">
               
               <div class="absolute inset-0 bg-gradient-to-br from-black via-[#0f0404] to-[#1a0505]"></div>
               
               
               <div class="absolute -top-[50%] -right-[10%] w-[120%] h-[200%] bg-[radial-gradient(circle_closest-side,_var(--tw-gradient-stops))] from-orange-900/40 via-red-950/20 to-transparent blur-[120px]"></div>

<div class="absolute -top-[20%] -right-[15%] w-[800px] h-[800px] bg-[radial-gradient(circle_closest-side,_var(--tw-gradient-stops))] from-amber-500/20 via-orange-600/10 to-transparent blur-[90px] mix-blend-screen opacity-80"></div>

<div class="absolute -top-[5%] -right-[5%] w-[400px] h-[400px] bg-[radial-gradient(circle,_var(--tw-gradient-stops))] from-amber-100/30 via-orange-200/5 to-transparent blur-[60px] mix-blend-overlay"></div>
               
               
               <div class="absolute top-0 right-0 w-[800px] h-[800px] opacity-40 mix-blend-screen pointer-events-none">
                  <div class="absolute top-0 right-0 w-[150%] h-[1px] bg-gradient-to-r from-transparent via-amber-100 to-transparent rotate-[-35deg] transform origin-top-right blur-[1px]"></div>
                  <div class="absolute top-0 right-0 w-[150%] h-[40px] bg-gradient-to-r from-transparent via-orange-500/10 to-transparent rotate-[-35deg] transform origin-top-right blur-[20px]"></div>
               </div>
            </div>

<div class="relative z-10 flex flex-col md:flex-row items-start md:items-end justify-between gap-10">
                <div class="max-w-xl">
                    <h2 class="text-4xl md:text-6xl font-medium tracking-tight mb-8 leading-[1.1]">Stay ahead without the noise.</h2>
                    <div class="flex flex-col sm:flex-row gap-3 w-full max-w-md">
                        <input type="email" placeholder="Enter your email" class="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-3 text-white placeholder:text-white/40 focus:outline-none focus:border-white/30 focus:bg-white/10 transition-colors backdrop-blur-sm" />
                        <button class="bg-white text-black px-6 py-3 rounded-lg font-medium hover:bg-gray-200 transition-colors whitespace-nowrap">Subscribe</button>
                    </div>
                </div>
            </div>
        </div>

<div class="grid grid-cols-1 lg:grid-cols-12 gap-12 border-b border-slate-100 pb-16 mb-12">
            
            <div class="lg:col-span-4">
                 <p class="text-xl font-medium text-slate-900 max-w-[280px] leading-snug">
                    Designed for those who build the future quietly.
                 </p>
            </div>
            
            
            <div class="lg:col-span-8 grid grid-cols-2 md:grid-cols-4 gap-8">
                
                <div class="flex flex-col gap-4">
                    <h4 class="font-medium text-slate-900">Platform</h4>
                    <ul class="space-y-3 text-slate-500 text-sm">
                        <li><a href="#" class="hover:text-slate-900 transition-colors">How It Works</a></li>
                        <li><a href="#" class="hover:text-slate-900 transition-colors">Features</a></li>
                        <li><a href="#" class="hover:text-slate-900 transition-colors">Integrations</a></li>
                        <li><a href="#" class="hover:text-slate-900 transition-colors">Roadmap</a></li>
                    </ul>
                </div>
                
                <div class="flex flex-col gap-4">
                    <h4 class="font-medium text-slate-900">Company</h4>
                    <ul class="space-y-3 text-slate-500 text-sm">
                         <li><a href="#" class="hover:text-slate-900 transition-colors">About</a></li>
                        <li><a href="#" class="hover:text-slate-900 transition-colors">Careers</a></li>
                        <li><a href="#" class="hover:text-slate-900 transition-colors">Culture</a></li>
                        <li><a href="#" class="hover:text-slate-900 transition-colors">Press Kit</a></li>
                    </ul>
                </div>
                 
                <div class="flex flex-col gap-4">
                    <h4 class="font-medium text-slate-900">Resources</h4>
                     <ul class="space-y-3 text-slate-500 text-sm">
                        <li><a href="#" class="hover:text-slate-900 transition-colors">Blog</a></li>
                        <li><a href="#" class="hover:text-slate-900 transition-colors">Docs</a></li>
                        <li><a href="#" class="hover:text-slate-900 transition-colors">Support</a></li>
                        <li><a href="#" class="hover:text-slate-900 transition-colors">API Reference</a></li>
                    </ul>
                </div>
                 
                <div class="flex flex-col gap-4">
                    <h4 class="font-medium text-slate-900">Legal</h4>
                     <ul class="space-y-3 text-slate-500 text-sm">
                        <li><a href="#" class="hover:text-slate-900 transition-colors">Privacy Policy</a></li>
                        <li><a href="#" class="hover:text-slate-900 transition-colors">Terms of Use</a></li>
                        <li><a href="#" class="hover:text-slate-900 transition-colors">Security</a></li>
                    </ul>
                </div>
            </div>
        </div>

<div class="flex flex-col md:flex-row justify-between items-center gap-4 text-sm font-medium">
            <div class="flex items-center gap-2 text-slate-900">
                 
                 <div class="w-5 h-5 bg-slate-900 rounded-full flex items-center justify-center text-white">
                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M12 4v16m8-8H4"></path></svg>
                 </div>
                 <span class="font-bold tracking-tight">rauantodev</span>
            </div>
            <div class="text-slate-500">
                Copyright © 2025 rauantodev
            </div>
        </div>
    </footer>

</div>
</template>

Related Examples

Simple footer with CTA Button
You can use this simple footer as a base for any type of websites. It includes a single CTAs button that you can customize according to your requirement.

Author:
Pagedone

1 year ago

2k
Creative with CTA buttons
Use Below tailwind css footer example with CTA buttons and site links.

Author:
Pagedone

1 year ago

2.4k
Responsive Footer Section
This modern and responsive footer adapts seamlessly to all screen sizes, ensuring a clean and organized layout. It includes essential navigation links, contact details, and a subscription form, all structured for easy access. Using display: contents;, the design remains flexible and visually balanced, enhancing the user experience across devices.

Author:
ABDO-SY

9 months ago

667
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

11 months ago

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

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

10 months ago

1.2k
Dark Footer with newsletter
Use Following Footer for dark vsersion of your website with newsletter, social icons and site links.

Author:
Pagedone

1 year ago

2.9k
Footer version Ousmane
Ce footer est associer a un menu de navigation qui apparait sous le mobile donc avec sa plus besoin de gerer les menus sous le mobile.

Author:
Ousmane CISSE

2 months ago

78
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

10 months ago

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

3.2k
NebulaFooter
Footer

Author:
Juraj

9 months ago

882
Footer with images

Author:
Mr Robot

3 years ago

9.6k
beautifull web page
I create a web page using cloude ai its amazing.

Author:
Akram Khan

1 year ago

3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components