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

179

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

Footer
A footer is a critical part of any professional website. A footer ensures your website is complete, professional, user-friendly, and legally compliant. It's where users go for answers when they're done scrolling.

Author:
KULDEEP

7 months ago

996
Footer, TailwindFlex v2
Another footer version of tailwindflex.com Example users randomly picked: Samuel & Prajwal

Author:
Matti

1 year ago

1k
Five columns with subscribe button
This example of tailwind css footer can be used if you want five columns in your footer with brand logo, sitemap links, description and social media account with additional subscibe button to connect with your website.

Author:
Pagedone

1 year ago

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

11 months ago

1.2k
Footer

Author:
Ivan K

1 year ago

3.4k
Responsive footer
Standard footer format

Author:
Emre Yılmaz

2 years ago

3.3k
Pre-footer Newsletter
Use this example with a Newsletter section before the footer, a sitemap, the logo of your brand and social media accounts.

Author:
Pagedone

1 year ago

2.8k
canvas fully covers
canvas fully covers

Author:
ABDESLAMI ACHRAF

1 year ago

4k
footer
footer

Author:
Anonymous

9 months ago

1.9k
Footer
Simple Dark footer

Author:
KULDEEP

7 months ago

818
Footer with Member info
Use below footer tailwind template which show number of member who joins the community.

Author:
Pagedone

1 year ago

2.3k
Simple footer

Author:
Piet Vriend

3 years ago

16k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components